Advanced Usage

styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React components underneath itself via the context API. In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.

Note

React Server Components (v6.3.0+): ThemeProvider is a no-op in RSC environments since React context is unavailable. Use CSS custom properties for theming in RSC instead. See the RSC section for best practices.

To illustrate this, let's create our Button component, but this time we'll pass some variables down as a theme.

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;


  /* Color the border and text with theme.main */
  color: ${props => props.theme?.main || '#BF4F74'};
  border: 2px solid ${props => props.theme?.main || '#BF4F74'};
`;


// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};


render(
  <div>
    <Button>Normal</Button>


    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);
// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme?.main || '#BF4F74'};
  border: 2px solid ${props => props.theme?.main || '#BF4F74'};
`;

// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button>Normal</Button>

    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);

Function themes

You can also pass a function for the theme prop. This function will receive the parent theme, that is from another <ThemeProvider> higher up the tree. This way themes themselves can be made contextual.

This example renders our above themed Button and a second one that uses a second ThemeProvider to invert the background and foreground colors. The function invertTheme receives the upper theme and creates a new one.

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  color:

Advanced Usage

Theming

Function themes