Integrate Emotion and Storybook
Emotion is a css-in-js framework to build fast and functional components. This recipe shows you how to get the most out of Emotion in Storybook.
To get started, you'll need to install
Run the following script to install and register the addon:
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/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
<Global /> 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
<ThemeProvider /> component.
Now, components made with Emotion will get the theme through the
theme prop along with the styles inherited from
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 Emotion with Storybook. 🎉