This recipe assumes that you have a React app using styled-components and have just set up Storybook >=6.0 using the getting started guide. Don’t have this? Follow styled-components' installation instructions then run:
How to setup styled-components and Storybook
styled-components is a popular library for building UI components with CSS-in-JS, while Storybook is a tool for creating and testing UI components in isolation. This post will show you how to integrate these two tools to create a powerful and flexible development environment for building user interfaces with styled-components.
This post will explain how to:
- 🔌 Setup
- 🧱 Use styled-components in your components
- 💅 Use a theme in your stories
- 🎨 Switch betweens themes in a click
If you’d like to see the example code of this recipe, check out the example repository on GitHub. Let's get started!
UIs often have a set of global styles that are applied to every component like CSS resets,
font-family, and colors.
In styled-components, use the
createGlobalStyle API to scope styles globally instead of locally (which is the library's default behavior).
.storybook/preview.js and create a
GlobalStyle component which includes a
font-family. Then apply it to all stories via a decorator.
If you already have
GlobalStyle in your app, you can import it into
.storybook/preview.js instead of creating it anew.
Let’s update some of our example components to use styled-components instead. Open up the Button component in
./src/stories/button.js. and replace it with the following code:
Button component is made with styled-components. In Storybook, you won't notice a visual difference. But if you inspect the DOM, you'll see hashed CSS-in-JS classnames.
One of the benefits of styled-components is that you can provide a theme to help you style all of your components in a consistent way. Let's create a new
./src/theme.js and add the following light theme:
To share this theme with the components in Storybook, you'll need a decorator.
Below I created a new file in
withTheme.decorator.js that will wrap your stories with styled-component's
All that is left to do is give this decorator to Storybook. Add the decorator to the
decorators array in
Now, components made with styled-components will get the theme through the
theme prop along with the styles inherited from
GlobalStyle. Let's update the example components to use the theme.
Dark mode has become an increasingly popular offering on the web. This can be achieved quickly using themes.
Let's add the following dark theme to
Now, to get the most out of your stories, there should be a way to toggle between themes in a click.
To add the switcher, declare a global type named
.storybook/preview.js and give it a list of supported themes to choose from.
This code will create a new toolbar menu to select your desired theme for your stories.
The last step to switch between themes is to update the
withTheme decorator to change the theme based on the selected value of the
theme global variable.
Now you're ready to use styled-components with Storybook. 🎉 Check out the example repo for a quick start.