2.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 backgrounds 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', ]} />
If you define the default property, the backgrounds toolbar will set that color for every story where the parameter is applied to. If you don't set it, the colors will be available but not automatically set when a story is rendered.
You can also set backgrounds on per-story or per-component basis by using parameter inheritance:
<CodeSnippets paths={[ 'common/storybook-addon-backgrounds-configure-backgrounds.js.mdx', ]} />
You can also only override a single key on the backgrounds parameter, for instance to set a different default value for a single story:
<CodeSnippets paths={[ 'common/storybook-addon-backgrounds-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/storybook-addon-backgrounds-disable-backgrounds.js.mdx', ]} />
Grid
Backgrounds toolbar also comes with a Grid selector. This way you can easily see if your components are aligned.
By default you don't need to configure anything in order to use it, but the properties of the grid are fully configurable.
Each of these properties have the following default values in case they are not passed:
<CodeSnippets paths={[ 'common/storybook-addon-backgrounds-configure-grid.js.mdx', ]} />
If you wish to disable the grid in a story, you can do so by setting the backgrounds parameter like so:
<CodeSnippets paths={[ 'common/storybook-addon-backgrounds-disable-grid.js.mdx', ]} />