Adding decorators - theme support
Adding styled components support in Storybook.
In the previous lesson, we wrote a few atomic components. However, when seeing them on Storybook, we noticed that they don't have global styles applied (such as font styles). Also, we used hardcoded values when styling them, which is not scalable when thinking about managing the look and feel of components in an app.
To enable us have a consistent style (color, spacing, etc.) throughout the app, this project uses a theme file that provides all necessary tokens, of which all are available when using
styled-components. The project also applies global styles in the app via the
src/styles/GlobalStyle.tsx file. Take a look into the file to see what it does.
Adding global styles#
In the decorators lesson, we learned that decorators can be used in Storybook to provide extra functionality or visuals to components. Given that we want every component in Storybook to have a set of global styles applied to them, it really sounds like a decorator is the solution for what we are looking for!
Let's create a decorator that supplies global styles to a story. When creating decorators, I normally like to put them in a file of their own. Go ahead and create the
.storybook/decorators.tsx file with the following structure:
And let's apply the
globalDecorators to Storybook by declaring them in
Now let's run Storybook and see what happens.
Oh no! Our component seems to be broken:
When situations like this happen, you need to debug the error and get to the root cause. You can use the devtools to investigate! The reason it's broken is that the
GlobalStyle component used in our decorator needs access to the design tokens from the theme (specifically the
However, the theme tokens are not provided yet. To fix that, we need to add a
ThemeProvider from styled-components to the decorator we just created, and pass one of the themes defined in