Storybook: How to remove default styles in Storybook Docs

[gabrieltomescu]

Support request summary

I'm using Storybook and the Docs Addon to create a living design system.

Storybook Docs comes with a set of default styles, like Nunito Sans as the typeface, and a bunch of other typographic styles. So each <Preview> tag injects these styles, and our components don’t reflect the spec from our design team.

I'm trying to create preview that have no default styles. Essentially removing the styles that come with Storybook Docs inside the preview box. All I want to inject are styles related to our design system.

Current setup:

• I've written some custom styles at build/styles.css
• Inside preview-head.html, I import styles using <link rel="stylesheet" href="./style.css" />
• When running storybook, I reference the static folder to access styles start-storybook -p 6006 -s ./build

When I run Storybook, I'm seeing my custom styles AND the default Storybook styles.

Storybook version

• @storybook/react 5.3.9
• @storybook/addon-docs 5.3.9

[gabrieltomescu]

Figured it out. I had to place components inside <Story> tags, not simply inside a <Preview> tag.

[tsnolan23]

Is there actually a different way to do this? When you use a <Story/>, you remove the ability to have Documentation-only MDX files. It would be awesome to strip the default styles from <Preview/> with a prop or something similar.

[shilman]

@tsnolan23 good idea, and maybe something that's come up elsewhere. Want to open up a separate feature request issue for this? I think it might be an easy fix to just copy the styling reset code out of Story and add it to Preview.

[tsnolan23]

@shilman sounds good, thanks, I'll try to take a look at it in the next week or so, too.

[tsnolan23]

PR to resolve this: https://github.com/storybookjs/storybook/pull/10274