1.8 KiB
| title |
|---|
| Themes |
Storybook's Themes addon allows you to switch between multiple themes for your components inside of the preview in Storybook.
Theme decorators
To make your themes accessible to your stories, @storybook/addon-themes exposes three decorators for different methods of theming.
JSX providers
For libraries that expose themes to components through providers, such as Material UI, Styled-components, and Emotion, use the withThemeFromJSXProvider.
<CodeSnippets paths={[ 'common/storybook-addon-themes-jsx-provider-decorator.js.mdx', 'common/storybook-addon-themes-jsx-provider-decorator.ts.mdx', ]} />
CSS classes
For libraries that rely on CSS classes on a parent element to determine the theme, you can use the withThemeByClassName decorator.
<CodeSnippets paths={[ 'common/storybook-addon-themes-classname-decorator.js.mdx', 'common/storybook-addon-themes-classname-decorator.ts.mdx', ]} />
Data attributes
For libraries that rely on data attributes on a parent element to determine the theme, you can use the withThemeByDataAttribute decorator.
<CodeSnippets paths={[ 'common/storybook-addon-themes-data-attribute-decorator.js.mdx', 'common/storybook-addon-themes-data-attribute-decorator.ts.mdx', ]} />