How to remove default Storybook Canvas styles?

user_188740 0
Viewed 4217

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):

enter image description here

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).

storybook reactjs
1 Answers

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.

user_104971000
Related