Recently I have started to investigate how we can use the react-storybook to separate the View (mostly UI dump component) from the data in our react application. Many interesting issues appeared on my way, today I want to stop on one of them – how to add general styles to your react-storybook project.
At the first glance, it seems that there are no need in the adding general styles to the react storybook project. Mainly, for two reasons:
- We are expecting that the every component that is created in the storybook will be modularised, so all the styles will be part of the component in one or other ways (currently, we have plenty possibilities for modular styling – from styled-components and CSS-modules options to the CSS-in-JS approach. You can find more options in this list https://github.com/MicheleBertoli/css-in-js)
- We are creating the storybook not like the separate project, but as the part of the existing React app, so we will have all styles that are general already set in the app.
But looking in details and in my particular none of this two reasons were not true. Speaking about the modularity – yes, we need the component to contain whole the styles, so it will look similar through different apps, but, for example, we are at least expecting some of the CSS general properties will be the same for different elements across the different application that we maintain. The good example is box-sizing property. We expect it has the same value, as we have in general the one approach how we are expecting the basic UI behavior of the different element across our apps. Other CSS properties that are often included into different reset CSS can be as well part of the consideration to be included in the separate styling file in the react-storybook project.
The other good example of the data that we want to be available in the react-storybook, but not to be exported together with the components can be the font, that we using across our platform.
So, I was today looking for some simple solution how to add some static styles to my react-storybook project in the way in which they will be not included in the storybook components if I will want to import any of them to my working project. Among the GitHub issues in the react-storybook project I have found one, that sounds pretty similar to what I was generally looking for: https://github.com/storybooks/react-storybook/issues/25. Looks like a something that can work.The next question came up in my head – how I should create the head.html file, should the needed links/scripts be wrapped in the <head> tag, or should I just simply provide the list of them. The solution for this one I have found in the storybook documentation –
The next question came up in my head – how I should create the head.html file, should the needed links/scripts be wrapped in the <head> tag, or should I just simply provide the list of them. The solution for this one I have found in the storybook documentation – https://getstorybook.io/docs/react-storybook/configurations/add-custom-head-tags – what is good that it provide the example how the working head.html can look like.
The next one step was to understand how to force my react-storybook load the static CSS that is available only locally. At the beginning, I have tried to place my static basic CSS in the .storybook folder and has expected that it will become available in the application from the box. But no, it wasn’t. So, what is the solution? I have found it in the documentation that accompanies the react-storybook project in the section about serving static files – https://getstorybook.io/docs/react-storybook/configurations/serving-static-files/#2-via-a-directory. So, if I want to make it be available directly from the .storybook folder I need to change flag ‘c’ in the loader to the ‘s’ (not best solution from the architectural point of view). To see the difference between the default loading string and with serving static files from the .storybook directory check the ‘Slow start’ section in the react-storybook documentation https://getstorybook.io/docs/react-storybook/basics/slow-start-guide/#add-kadira-storybook
And … it works as expected!
Let me know in the comments if you have made it works in smarter or simplier way!
If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.
This worked perfectly, thanks for documenting it here!