1.6 KiB
| title |
|---|
| Backgrounds |
The backgrounds toolbar item allows you to adjust the background that your story is rendered on via Storybook’s UI:
Configuration
By default, the background toolbar presents you with a light and dark background.
But you're not restricted to these two backgrounds, you can configure your own set of colors with the parameters.backgrounds parameter in your .storybook/preview.js:
<CodeSnippets paths={[ 'common/storybook-preview-configure-background-colors.js.mdx', ]} />
You can also set backgrounds on per-story or per-component basis by using parameter inheritance:
<CodeSnippets paths={[ 'common/button-story-configure-backgrounds.js.mdx', ]} />
You can also only override a single key on the background parameter, for instance to set a different default value for a single story:
<CodeSnippets paths={[ 'common/button-story-override-background-color.js.mdx', ]} />
If you want to disable backgrounds in a story, you can do so by setting the backgrounds parameter like so:
<CodeSnippets paths={[ 'common/button-story-disable-backgrounds.js.mdx', ]} />