-
|
Hi! I'm using both storybook and docusaurus to develop and document our component library, and I found the We're seeing the same issue of CSS-bleed in our Docusaurus site and I thought that maybe I could snag some inspiration from Storybooks Can anyone shed some lights on this for me? 😅 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi @Kegulf! I'm Dosu and I’m helping the storybook team. The sb-unstyled class in Storybook is used as an "escape hatch" to prevent Storybook's default docs styles from affecting certain content. The Unstyled block is a React component that simply renders a with the sb-unstyled class. When you wrap content in this block, Storybook's global CSS selectors are written to specifically exclude any element with sb-unstyled (and its descendants) from the default styling—so your content inside stays untouched by Storybook's docs CSS. There are no direct CSS rules for sb-unstyled itself; its power comes from being excluded in the selectors that apply the default styles (docs, code, selector strategy).
To use a similar pattern in Docusaurus, you could create your own wrapper/component that adds a custom class (like sb-unstyled), then update your global CSS selectors to exclude that class from your default styles. This gives you a way to opt out of global styling for specific sections and prevent CSS bleed. To reply, just mention @dosu. How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
Hi @Kegulf! I'm Dosu and I’m helping the storybook team.
The sb-unstyled class in Storybook is used as an "escape hatch" to prevent Storybook's default docs styles from affecting certain content. The Unstyled block is a React component that simply renders a