Styling tags generated by @storybook/addon-docs from MDX-files?

user_5459087 0
Viewed 663

Currently I'm trying to build company-branded desing-system in Storybook. I use addon-docs to generate stories from MDX format for my components and articles about design vision. I want to style generated tags such as h1.

Including custom CSS-stylesheet doesn't seem a good idea to me because it may mix with other components (such as Header that renders the same h1 tag with some className). Of course I may use custom components for documenting, but having MDX in this case has no sense.

From my point of view there is should be some CSS-in-JS styling API for this tags. Have I missed something in Stoybook documentation?

storybook styling markdown
1 Answers

The <Story> tag has an "inline" attribute that tells Storybook whether to inline the story in the html or to render it in an iframe. If your components don't isolate their styles you can choose to render them in an iframe. That way, you can apply any styling to your documentation without affecting your components.

<Story inline="false">

Note: I haven't tried this personally (yet) but saw it in the docs as I was setting up my own Storybook. Hopefully it helps.

user_4189040
Related