storybook: [Bug]: Storybook docs CSS cascading into our components

I’m trying to style the entire storybook (v7) with my company’s design system (based on CSS variables defined in :root) and I’ve been struggling for hours. I had to add many CSS overrides in preview-head.html and I’m in the middle of a CSS specificity war because it now messes with our components…

For example here’s a MDX documentation page where I’m using <Unstyled>, but I still get inherited styles like font-family or font-size in my lists:

And it gets worse for stories:

Would it make sense to consider some option to opt-out from storybook’s styling for everything related to the preview pane (mdx / stories)? Being allowed to start from a blank slate ?

In the meantime, the approach taken by @jtiala worked for us to re-set the necessary styles (in our case, font-family)

I’m curious, though – when would a user not want to wrap their story in Unstyled? Are there cases where the Storybook styles bleeding into the stories themselves desirable?

Facing this with the latest storybook version still. The only workaround is adding <Unstyled /> to specific components on each mdx doc. Any way we can globally override these styles or unstyle it globally for mdx docs?

As @JReinhold said, we can probably reopen this issue if we can get a minimal app reproducing the bug.

I will see if I can put an app together, but I am still curious if there is a way (or can be a way) to “unstyle” all stories globally instead of having to modify every story component that we have. I appreciate your assistance with this.

Are there cases where the Storybook styles bleeding into the stories themselves desirable?

I’m struggling to think of any cases where you wouldn’t want isolated story styles.

@JReinhold does this need to be on the burndown?

I’m having a similar yet opposite issue: my component styles are bleeding into the Docs styles. The styles most effected are where I’ve styles the element itself and those styles are being used by the html in the Docs, e.i. <div>, <button>, <input>.

This bug still persist in 7.2 version with MDX stories…

The only way to overwrite this:

is something like that in preview-head.html:

 * :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
 * :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)),
 * :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)),
 * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)),
 * :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)),
 * :where(ul:not(.sb-anchor, .sb-unstyled, .sb-unstyled ul)),
 * :where(ol:not(.sb-anchor, .sb-unstyled, .sb-unstyled ol)),
 * :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
     font-family: inherit!important;
 }

* :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
* :where(ul:not(.sb-anchor, .sb-unstyled, .sb-unstyled ul)),
* :where(ol:not(.sb-anchor, .sb-unstyled, .sb-unstyled ol)),
* :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
    font-size: 16px!important;
    line-height: 28px!important;
}

We’re running into this as well, also with auto-docs; we don’t have a place to render Unstyled explicitly. Maybe it should be applied for auto-docs automatically?

We’ve added a new doc block Unstyled that is suppose to help mitigate this problem. You can use that to wrap any part of your docs page that you don’t want the global styles to bleed in to.

The documentation for this is not quite ready yet, but you can see the migration notes about it here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#default-docs-styles-will-leak-into-non-story-user-components

And here’s an example of what it does in action: https://next--63591cc9eaf4e8caec2bb5e9.chromatic.com/?path=/docs/blocks-unstyled--docs

Does that help you @viveleroi ? It’s unclear to me whether you are experiencing this in AutoDocs or in your manually written docs pages.