Emotion CSS overriding element styles in MDX Preview

[ksaturnius]

Describe the bug
I am working on a documentation-only .mdx file for our design system's typography styles. I have the following block in my file:

<Preview>
  <div>
    <h1 class="type-h0">Header 0 - 72px</h1>
    <h1 class="type-h1">Header 1 - 48px</h1>
    <h2 class="type-h2">Header 2 - 36px</h2>
    <h3 class="type-h3">Header 3 - 30px</h3>
    <h4 class="type-h4">Header 4 - 24px</h4>
    <h5 class="type-h5">Header 5 - 18px</h5>
  </div>
</Preview>

These type- styles in my CSS are only used to adjust the font size, but they are getting multiple other styles applied that seem to be getting injected as part of Storybook's processing of the content. I have also tried swapping the <div> to be a <Story> tag, but it made no difference.

Expected behavior
Storybook should not be injecting it's styling into any Preview block.

Screenshots

System:
Environment Info:
System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 10.17.0 - /usr/local/opt/node@10/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.11.3 - /usr/local/opt/node@10/bin/npm
Browsers:
Chrome: 81.0.4044.138
Firefox: 75.0
Safari: 13.1

[shilman]

You either need to put your components inside a story, or you need to remove the docs styling: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#overwriting-docs-container

UPDATE: I think we might have already added the style reset to Preview in 6.0. Can you give it a try?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ksaturnius]

I have been able to migrate the project to v6, but I am no longer able to view/use MDX currently, so I will keep you updated as things progress with #11094

[ksaturnius]

@shilman I've got v6 working with Vue/MDX now and I can confirm that the Preview component styles are no longer overriding my typography styles. Thank you.

[shilman]

Relieved to hear that. Yay! 🎉

[gabor-ottlik-epam]

It's not working for me. I use scss to apply my styles but even when I use <Preview> in React a css-1d8ls76 is overriding my h1 style.

[alvarezmario]

Hi! I'm having the same issues as well as @gabor-ottlik-epam There is a generated class that is overriding bootstrap styles on my project.

[cliedelt]

I have the same problem...

[williamliangwl]

It happens on my case as well. I am trying to add custom fonts to my Storybook through preview-head.html.

The preview-head.html does work expectedly, the @font-face is inserted successfully to iframe's head. However, in the iframe's head, there are so many injected styles and one of them is overriding the font-family.

I was trying to use

body { font-family: MyFont; }

at preview-head.html to reduce needs of applying the same styling over and over again.

Hereby I attach the detected injected styles

is there a way to remove those ?

[njsokol]

@shilman it appears that the emotion styling classes like .css-1j28tt in the example above are more specific and overriding a "reboot" stylesheet that applies specific styling to all components (e.g. h1). Is there a way to get past this where we can use a reboot stylesheet? In my case we have a markdown file that is being obliterated by emotion styling :/ when we would rather it be "our" styling. Using preset-scss as well. Any help would be awesome!

[williamliangwl]

I ended up patching files of Storybook post install, i.e.:

• @storybook/components/dist/typography/DocumentFormatting.js
• @storybook/theming/dist/base.js

[shilman]

@domyen I think you had a workaround for this?

[alexandria-lewis]

I'm having trouble with .css-1j28tt overriding my custom fonts in my mdx files. I have no idea how to stop it from doing that without hacking my mdx files with body * {font-family: "" !important;}

[domyen]

I think the problem here is that styles cascade. That's what they're supposed to do, but that presents some challenges. We need to apply styling to the Docs page while also rendering users stories inline (not in an iframe) – that means there may be style collisions as seen above.

There are a few options with different tradeoffs but here are the most interesting ones:

• Use the iframe option for stories: this prevents style pollution just like the Canvas tab, but may impact the page's performance
• If you're using our DocBlocks, you can eject/fork them and customize the styling as you see fit
• Make your CSS more specific than ours. In CSS-in-JS we'd use a && { /*styles here*/ } but the various CSS processors usually have similar features.

[njsokol]

@domyen I'm looking at the 3 options you've mentioned

• I believe we are talking in the docs page, the stories are fine inside their Preview/Canvas.
• Do you have an example of ejecting the DocBlocks and implementing custom styling for these? We are HTML/Web-Components/React language so we need something to work across all of these (SASS for styling following a little on the Bootstrap curtails with "reboot").
• Our reboot or reset file is specifically around the HTML elements and not so much classes. In this case we are the least specific (lol) and can't really be more specific

[timbomckay]

I commented in another issue thread so I'll try to not repeat myself too much.

@domyen's suggestion to "Make your CSS more specific than ours" is currently what we're having to do via .sbdocs.sbdocs-content, but I believe this requirement is ill-advised. It would also mean "The Storybook theme API is narrow by design" claim under the escape hatches documentation is misleading if it still requires us to hunt down what level of specificity we need to get our styles to work.

As @domyen mentioned this is an issue with the cascade, which means the cascade should be fixed instead of increasing specificity. If Storybook controls where the emotion styles are inserted it'd be ideal if that was before the consumer's custom main.hash.css, otherwise might have to do something non-standard and put the main.css in the body with the understanding that this is a demo application.

However, @njsokol's comment about the reset styles wouldn't be fixed from the cascade alterations because classes will still have a higher specificity than elements. We have this issue as well for something so small as a p or span and can't provide utility classes to fix. This is probably one of the more difficult parts of styling a customizable application as Storybook wants to ensure there's something out of the box, and not providing a reset of their own would require more work for the us consumers. Though I suppose if Storybook used element selectors instead of classes and fixed the cascade it might respect the consumers custom reset...? I don't know. Another thought would be a reset flag to opt out of storybook's or something.

Essentially we want the headings & paragraphs to look like our brand's headings & paragraphs in a standard markdown/mdx rendering but it's proven difficult to have our styles respected.

[burntcustard]

I was having the exact same problem - trying to apply utility classes to an .mdx file, to demo typography.

I can happily and easily do the same thing within a regular old .jsx or .tsx story, where inside the <head> is:

<style type="text/css">{ /* Tailwind CSS */ }</style>
<style type="text/css">{ /* Styles specific to a loaded component like a button */ }</style>

I assumed I'd be able to do the same with .mdx docs, overriding any extra docs styling that's added, with Tailwind utility classes like text-xl. However, with those, the styles in the <head> are:

<style type="text/css">{ /* Tailwind CSS */ }</style>
<style type="text/css">{ /* Previously loaded styles specific to previously loaded components */ }</style>
<style data-emotion="css" data-s="">{ /* Generated sbdocs snippet */}</style>
<style data-emotion="css" data-s="">{ /* Generated sbdocs snippet */}</style>
<style data-emotion="css" data-s="">{ /* Generated sbdocs snippet */}</style>
<style data-emotion="css" data-s="">{ /* Generated sbdocs snippet */}</style>

Because the sbdocs styles are so specific, for example every single <div> gets it's font-family set, and because they're loaded after any(?) user-added CSS (for me, Tailwind), they override everything else on the page.

I haven't yet seen a valid reason for this behaviour to be intentional - and I believe it could be "fixed" by re-ordering the sbdocs CSS to come before (almost?) everything else, rather than after it.

I've come up with a horrific workaround which proves that re-ordering works (at least, for me). It keeps the sbdocs styles in the <head>, but moves the other styles into the top of the <body>, going bottom-to-top, which means I end up with Tailwind right at the start of <body>.

export const FixMdxStyles = () => {
    const nonDocsStyles = [...document.querySelectorAll('style:not([data-emotion])')];
    nonDocsStyles.reverse().forEach(styles => document.body.prepend(styles));
}

I'm using that snippet just at the bottom of a couple of documentation .stories.mdx files, as <FixMdxStyles/>. I would not recommend it for anything even remotely consumer-facing, because it's probably trying to reshuffle things every time one of those docs pages is loaded. But it works for me for now.

[JameelKhan9]

Having the same issue with fonts and styles in MDX files overriding global/app defined styles.

@burntcustard that doesn't seem to work for me.

[NikitaIT]

My fix

Wrap all components in class sb-unstyled. In fact, I'm happy with the situation in which only my styles are applied on the page.

import ...
<Meta of={BannerStories} />
<div className="sb-unstyled">
# h1
          ...
</div>