@emotion/styled

What is @emotion/styled?

The @emotion/styled npm package is a library for styling React components using tagged template literals. It allows developers to write CSS code in JavaScript and attach styles directly to components, providing a more seamless integration of styles within JS code. It leverages the power of Emotion, a performant and flexible CSS-in-JS library.

What are @emotion/styled's main functionalities?

Creating styled components

This feature allows you to create a new React component with a set of styles attached to it using a template literal. The styles are scoped to the component, and pseudo-classes and media queries can be used within the template literal.

import styled from '@emotion/styled';

const Button = styled.button`
  background-color: hotpink;
  padding: 16px;
  border-radius: 8px;
  color: white;
  font-size: 1em;
  &:hover {
    opacity: 0.9;
  }
`;

<Button>Click me</Button>

Theming

This feature allows you to define a theme object and use it to style components. The ThemeProvider component makes the theme available to all styled components, which can access the theme via props.

import styled from '@emotion/styled';
import { ThemeProvider } from '@emotion/react';

const theme = {
  colors: {
    primary: 'hotpink'
  }
};

const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
  /* other styles */
`;

<ThemeProvider theme={theme}>
  <Button>Themed Button</Button>
</ThemeProvider>

Dynamic styling

This feature allows you to pass props to your styled components to dynamically change their styles based on the props received. This is useful for creating variations of a component, such as primary and secondary buttons.

import styled from '@emotion/styled';

const Button = styled.button`
  color: ${props => props.primary ? 'hotpink' : 'black'};
  /* other styles */
`;

<Button primary>Primary Button</Button>
<Button>Default Button</Button>

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.

README

@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.