emotion-styled-components

emotion-styled-components

A styled function with automatic filtering of non-standard attributes base on @emotion/styled package.

Motivation

emotion-styled-components is the result of thinking about how we can improve prop forwarding for the @emotion/styled system. In one of our past projects, we used the styled-components system where props forwarding was provided out of the box, but when we switched to @emotion/styled we ran into a problem where some components were generating warnings: Invalid attribute name then we tried to solve this problem. By focusing on the styled-components use case, we were able to solve this problem.

Installation

To use this package you must have installed emotion package

  # with npm
  npm install --save emotion-styled-components @emotion/styled

  # with yarn
  yarn add emotion-styled-components @emotion/styled

Simple Example

If the styled target is a simple element (e.g. styled.div), styled-components passes through any known HTML attribute to the DOM. If it is a custom React component (e.g. styled(MyComponent)), styled-components passes through all props.

This example shows how all props of the Button component are passed on to the DOM node that is mounted, as with React elements.

import styled from 'emotion-styled-components';
import MyButton from '@my-ui-components';

const Button = styled(MyButton)<{ $primary?: boolean; }>`
  background: ${props => props.$primary ? "#BF4F74" : "white"};
  color: ${props => props.$primary ? "white" : "#BF4F74"};
`;

render(
  <div>
    <Button type="button">Normal</Button>
    <Button $primary type="submit">Primary</Button>
  </div>
);

Note how the $primary prop is not passed to the DOM, but type are? The styled function is smart enough to filter non-standard attributes automatically for you.

It also supports all functions coming from emotion by default.

Arguments

See more on emotion.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

License

Code released under the MIT License.