@emotion/styled

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>