Storybook's own styles are overwriting my component styles

[wiktoriavh]

Describe the bug
I have an h2 element with styles:

h2 {
  display: block;
}

But because of Storybook's own styling in the DOM, it becomes

h2 {
  display: inline-block;
}

And it messes everything up.

To Reproduce
Just have a h2 Element with styles applied, like in the example above.

System
// Please paste the results of npx sb@next info here.

Additional context
Writing my stories in MDX. This issue appears in the Docs and the Canvas panel.

[DarkCode01]

I have the same issue!

[wiktoriavh]

I was able to fix my issue by adding the CssBaseline into a decorator in preview.js from Material UI.

[ed-asriyan]

I have the same issue.
Elements with .loader class in a story are not displayed as I expect. Using devtools I found that these rules are applied to my component.

Versions that I use:
@storybook/addon-actions@6.4.0
@storybook/addon-essentials@6.4.0
@storybook/addon-links@6.4.0
@storybook/vue@6.4.0

v6.3.12 does not have this problem

[shilman]

@ed-asriyan Do you a have a reproduction repo you can share? Is this in both the docs and canvas tabs?

[ed-asriyan]

@shilman

Do you a have a reproduction repo you can share?

You can find the reproduction repo here: https://github.com/ed-asriyan/storybook-bug-sample. In ReadMe you can also find screenshot of the bug.

Is this in both the docs and canvas tabs?

It is surely reproducing in canvas. I have not yet become familiar with Storybook docs API well enough, so I can not answer about docs.

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.2 containing PR #16815 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there's still more to do.