How to add global styles without impacting the content generated by the info addon?

[mlegait]

Bug or support request summary

I would like the components to have the same look and feel in storybook and in the application where they are used. That's why I would like to apply in storybook the same reset.css and the same global styles (font-family, color, box-sizing, ...) as in the application.
My concern is that theses global styles are also applied to the content generated by the info addon. And the reset.css completely breaks the markdown 😕

So here is my question: How can I apply global styles to my components without impacting the content generated by the info addon?

Steps to reproduce

// config.js
require('../src/reset.scss'); // from Eric Meyer
require('./storybook.scss');

// storybook.scss
@import 'variables';
html {
  background-color: $color-white-smoke;
  color: $color-dark-lava;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

I use markdown to describe the component with the addon info, but the style is completely broken by reset.css. We don't see anymore bullet lists, strong text, ...

Instead of using the html selector I could use #root but the content generated by info is also in this div and I have no other id or class to help me target only my components.

Maybe a solution could be to add an id on the div that encapsulates the component and nothing else. What do you think?

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/[email protected]
• @storybook/[email protected]

[igor-dv]

Sadly it can't be done currently since addon info is rendered to the preview area - side by side with the users' code. We had an attempt to move parts of the info-addon to the addons panel, but this PR was not finished.

[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!