Menu
Storybook applies default styles to the the story canvas iframe. This prevents my stories from looking the way they should. How can I get rid of Storybook's default styles?
For example, here is the default style for an h2 element (via Storybook's page.css):
The source of that page.css is webpack://src/stories/page.css.
If I add styles in preview-head.html, Storybook will apply my custom styles AND the default Storybook styles, with the default Storybook styles taking precedence (unless my custom style has a strong specificity).
517
To hide the "Canvas" tab: export default { title: 'YourTitle', parameters: { previewTabs: { canvas: { hidden: true}, }, viewMode: 'docs', } }; To hide the "Docs" tab: export default { title: 'YourTitle', parameters: { previewTabs: { 'storybook/docs/panel': { hidden: true } }, viewMode: 'canvas', } };
Storybook's Canvas Doc Block is a wrapper featuring a toolbar that allows you to interact with its content while automatically providing the required Source snippets.
The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., SCSS preset ), or customize Storybook's webpack configuration and include the appropriate loader. To use your CSS in all stories, you import it in .storybook/preview.js
The Storybook web application reads .storybook/preview-body.html if it exists, which directly controls the <body> element in the rendered HTML. As we have said, the styling should be set in head, i.e. preview-head.html, instead of preview-body.html.
In the example above, Storybook will center all stories in the UI. layout accepts these options: 1 centered: center the component horizontally and vertically in the Canvas 2 fullscreen: allow the component to expand to the full width and height of the Canvas 3 padded: (default) Add extra padding around the component More ...
If you need webfonts to be available, you may need to add some code to the .storybook/preview-head.html file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the static file location. ✍️ Edit on GitHub – PRs welcome!
By default when installing Storybook via npx sb init for React, Storybook adds a Page.tsx (.js) file under src/stories. In that file they import './page.css'; simply remove that import and you'll be set.
Hope this is your fix... It may be different depending on what framework you're using.
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
