Storybook 的 parameters 参数怎么在单个 story 里覆盖全局配置?

西门丹丹 阅读 34

我在 .storybook/preview.js 里设置了全局的 parameters,比如 viewport 和 backgrounds,但现在有个组件的 story 想用不同的背景色,试了直接在 story 对象上加 parameters,但好像没生效?

我写的是这样:

export const MyStory = () => <MyComponent />;
MyStory.parameters = {
  backgrounds: { values: [{ name: 'dark', value: '#000' }] }
};

但 Storybook 还是显示全局的背景选项,是我写法不对吗?

我来解答 赞 8 收藏
二维码
手机扫码查看
2 条解答
萌新.开心
直接用这个 写法应该没问题,可能是别的地方影响了。确保你的全局配置没有强制覆盖单个 story 的设置。检查下 .storybook/preview.js 里有没有其他地方设置了 backgrounds 并且是强制的。如果还是不行,试试重启下 Storybook,有时候缓存问题挺烦人。代码贴出来看看:

export const MyStory = () => ;
MyStory.parameters = {
backgrounds: { default: 'dark', values: [{ name: 'dark', value: '#000' }] }
};
点赞
2026-03-20 23:10
开发者忠娟
你只设置了 values 但没指定用哪个,加上 default 就行了:

MyStory.parameters = {
backgrounds: {
default: 'dark',
values: [{ name: 'dark', value: '#000' }]
}
};


光定义 values 只是覆盖了可选列表,default 才是真正控制当前 story 显示哪个背景的字段。
点赞 3
2026-02-28 14:16