$ 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 main.js
in your storybook config.
Add following content to it:
module.exports = {
addons: ['@storybook/addon-backgrounds/register']
}
Then write your stories like this:
import React from 'react';
export default {
title: 'Button',
parameters: {
backgrounds: [
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
]
},
};
export const defaultView = () => (
<button>Click me</button>
);
You can add the backgrounds to all stories with addParameters
in .storybook/preview.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';
export default {
title: 'Button',
}
export const defaultView = () => (
<button>Click me</button>
);
defaultView.story = {
parameters: {
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';
export default {
title: 'Button',
}
export const noBackgrounds = () => (
<button>Click me</button>
);
noBackgrounds.story = {
parameters: {
backgrounds: [],
},
};
export const disabledBackgrounds = () => (
<button>Click me</button>
);
disabledBackgrounds.story = {
parameters: {
backgrounds: { disabled: true },
},
};
© 2010 - cnpmjs.org x YWFE | Home | YWFE