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:
@storybook/addon-themes
Run the following script to install and register the addon:
This will run a configuration script that will walk you through setting up the addon. When prompted, select styled-components
from the configuration options.
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
.
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.
If you already have <GlobalStyles />
in your app, you can import it into .storybook/preview.js
instead of creating it anew.
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.
When you provide more than one theme, a toolbar menu will appear in the Storybook UI to select your desired theme for your stories.
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.