Issue
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).
Solution
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.
Answered By - aedwards22
Answer Checked By - - Terry (ReactFix Volunteer)