Storybook Background Addon can be used to change background colors inside the preview in Storybook.
npm i -D @storybook/addon-backgroundsThen create a file called addons.js in your storybook config.
Add following content to it:
import '@storybook/addon-backgrounds/register';Then write your stories like this:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withBackgrounds } from '@storybook/addon-backgrounds';
storiesOf('Button', module)
.addDecorator(
withBackgrounds([
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
])
)
.add('with text', () => <button>Click me</button>);You can add the backgrounds to all stories with addDecorator in .storybook/config.js:
import { addDecorator } from '@storybook/react'; // <- or your storybook framework
import { withBackgrounds } from '@storybook/addon-backgrounds';
addDecorator(
withBackgrounds([
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
])
);If you want to override backgrounds for a single story or group of stories, pass the backgrounds parameter:
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.addParameters({
backgrounds: [
{ name: 'red', value: '#F44336' },
{ name: 'blue', value: '#2196F3', default: true },
],
})
.add('with text', () => <button>Click me</button>);If you don't want to use backgrounds for a story, you can set the backgrounds parameter to [], or use { disable: true } to skip the addon:
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module).add('with text', () => <button>Click me</button>, {
backgrounds: { disable: true },
});