mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 20:51:07 +08:00
ae9e32f8d0
- This ensures a single version - This adds a good place to add themes - Addons can take a dependency on something storybook - We could migrate to another styling lib without asking all users to migrate with us
Storybook Addon Backgrounds
Storybook Background Addon can be used to change background colors inside the preview in Storybook.
Installation
npm i -D @storybook/addon-backgrounds
Configuration
Then create a file called addons.js in your storybook config.
Add following content to it:
import '@storybook/addon-backgrounds/register';
Usage
Then write your stories like this:
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.addParameters({
backgrounds: [
{ 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 addParameters in .storybook/config.js:
import { addParameters } from '@storybook/react'; // <- or your storybook framework
addParameters({
backgrounds: [
{ 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)
.add('with text', () => <button>Click me</button>, {
backgrounds: [{
name: 'red', value: 'rgba(255, 0, 0)',
}]
});
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('example 1', () => <button>Click me</button>, {
backgrounds: [],
});
storiesOf('Button', module)
.add('example 2', () => <button>Click me</button>, {
backgrounds: { disable: true },
});