@emotion/styled

@emotion/styled

The styled API for @emotion/react

Install

yarn add @emotion/react @emotion/styled

Usage

import styled from '@emotion/styled'

let SomeComp = styled.div({
  color: 'hotpink'
})

let AnotherComp = styled.div`
  color: ${props => props.color};
`

render(
  <SomeComp>
    <AnotherComp color="green" />
  </SomeComp>
)

More documentation is available at https://emotion.sh/docs/styled.

Similar packages

Other packages similar to @emotion/styled

styled-components

Styled-components is another popular CSS-in-JS library that provides similar functionality to @emotion/styled. It also uses tagged template literals to style components. The syntax and API are very similar, but styled-components has a slightly different focus on theming and a larger ecosystem.

linaria

Linaria is a zero-runtime CSS-in-JS library that extracts styles to CSS files at build time, rather than injecting styles at runtime like @emotion/styled. This can result in better performance and smaller bundle sizes, but with less dynamic capabilities.

glamorous

Glamorous is a now-deprecated CSS-in-JS library that was similar to @emotion/styled. It allowed for styling components with JavaScript objects or template literals. Although it's no longer maintained, it was once a popular alternative.