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 could improve the forwarding of props for the @emotion/styled system. In one of our projects, we used the styled-components system, where the forwarding of props was provided out of the box, so when we switched to @emotion/styled, we encountered a problem when some components issued warnings: "Invalid attribute name", and tried to solve this problem. By focusing on the use case of styled-components, we managed 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

import styled from 'emotion-styled-components';

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

render(
  <div>
    <Button>Normal</Button>
    <Button $primary>Primary</Button>
  </div>
);

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.