$ npm install @storybook/addon-backgrounds
Storybook Background Addon can be used to change background colors inside the preview in Storybook.
npm i -D @storybook/addon-backgrounds
Then 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 },
});
© 2010 - cnpmjs.org x YWFE | Home | YWFE