How to remove default Storybook Canvas styles?

Question

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

Delly

maybe it will be helpful specificity.keegan.st (just increase specificity) – Peridot

@DaniilLoban thanks, but then I'd have to figure out what all of the defaults are and manually reset them. And if Storybook updates later with more defaults, I'd have to reset them again. Seems very strange for Storybook (a UI preview tool) to not allow us to remove their default styles. – Delly

maybe is it github.com/storybookjs/storybook/issues/8144 ? – Peridot

Thank you @DaniilLoban. I appreciate you looking into that. That github issue is related to resetting the browser default. But on top of the browser default, Storybook applies their own default. I need to remove that and was hoping that Storyboard had a setting where I can do that. I'm already using material-ui's CssBaseline (material-ui.com/components/css-baseline) to reset the browser default but Storybook's default styles are overriding that reset. – Delly

Sorry, @Johnny Oshika, No ideas. – Peridot

@DaniilLoban Thank you for your help! I hope someone has an answer to this. – Delly

@JohnnyOshika did you ever figure this out? I"m having the same problem, Storybook flat out breaks a component of mine that works perfectly outside of SB. I want to turn off all SB styles too. – Phillip

@Phillip see aedwards22's answer below. It worked for me. – Delly

Answer 1

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.

Hildegaard

This was it! So simple. I'm surprised more people aren't looking for this reset. Many thanks! – Delly

While this works for me, it's odd that Storybook would allow CSS from another module to bleed into other modules where you don't want that style. – Buie

How does this work when I have installed storybook via HTML? It still adds this odd .css-1p8ieni to my elements, with their custom styling. How can I remove that? – Shavonneshaw

I have removed all builtin css and import and still has the .css-* classes – Turbidimeter

@Turbidimeter can you provide a link to a repo? – Hildegaard

Wrote an answer at the end. I got it solved – Turbidimeter

Answer 2

Don't use MDX Syntax.

I had same issue and it was because I was using MDX Syntax.

When I started using the export syntax it didn't apply any built-in CSS classes.

Turbidimeter