Back to integrations
styled-components

Integrate Styled Components with Storybook

Styled Components is a css-in-js framework to build fast and functional components.
Prerequisites

This recipe assumes that you have a React app using styled-components and have just set up Storybook >=7.0 using the getting started guide. Don’t have this? Follow styled-components' installation instructions then run:

# Add Storybook:
npx storybook@latest init

1. Add @storybook/addon-themes

Run the following script to install and register the addon:

npx storybook@latest add @storybook/addon-themes

This will run a configuration script that will walk you through setting up the addon. When prompted, select styled-components from the configuration options.

Did the configuration script fail?

Under the hood, this runs npx @storybook/auto-config themes, which should read your project and try to configure your Storybook with the correct decorator. If running that command directly does not solve your problem, please file a bug on the @storybook/auto-config repository so that we can further improve it. To manually add this addon, install it, and then add it to the addons array in your .storybook/main.ts.

2. Provide GlobalStyles

In .storybook/preview.js, create a <GlobalStyles /> component that includes a font-family. Then apply it to your stories with the withThemeFromJSXProvider decorator by adding it to the decorators array.

// .storybook/preview.jsx
 
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { createGlobalStyle } from 'styled-components';
 
const GlobalStyles = createGlobalStyle`
  body {
    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
`;
 
export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles, // Adds your GlobalStyle component to all stories
  }),
];

If you already have <GlobalStyles /> in your app, you can import it into .storybook/preview.js instead of creating it anew.

3. Provide your theme(s)

To share your theme(s) with the components in Storybook, you'll need to provide them to the withThemeFromJSXProvider decorator along with styled-components <ThemeProvider /> component.

// .storybook/preview.jsx
 
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
import { lightTheme, darkTheme } from '../src/themes';
 
/* snipped for brevity */
 
export const decorators = [
  withThemeFromJSXProvider({
  themes: {
    light: lightTheme,
    dark: darkTheme,
  }
  defaultTheme: 'light',
  Provider: ThemeProvider,
  GlobalStyles,
})];

When you provide more than one theme, a toolbar menu will appear in the Storybook UI to select your desired theme for your stories.

Get involved

Now you're ready to use styled-components with Storybook. 🎉

If you use styled-components at work, we'd love your help making this setup even easier. Join the maintainers in Discord to get involved, or jump into addon docs.

Tags
Contributors
  • ShaunEvening
    ShaunEvening