Storybook 背景插件怎么自定义默认背景色？

UE丶文明提问于 2026-03-27 15:11:22 阅读 3

工具

我在 Storybook 里用了 Backgrounds 插件，但默认总是白色背景，想改成浅灰色，试过在 preview.js 里配 backgroundColor，但好像没生效。

我现在的配置是这样：

export const parameters = {
  backgrounds: {
    default: 'light',
    values: [
      { name: 'light', value: '#f5f5f5' },
      { name: 'dark', value: '#333333' }
    ]
  }
};

可打开 Storybook 还是白底，是我哪里写错了吗？

我来解答赞 0 收藏

反馈

2 条解答

Des.永景 Lv1

你这个问题，backgroundColor不是这么用的，得在values里指定默认值才行。把配置改成这样：

export const parameters = {

  backgrounds: {

    default: 'customGray',

    values: [

      { name: 'customGray', value: '#f0f0f0' },

      { name: 'light', value: '#f5f5f5' },

      { name: 'dark', value: '#333333' }

    ]

  }

};

记得把名字和值都加上，默认名要对应第一个值的名字。这玩意儿坑不少，调半天很正常。

2026-03-27 17:04

公孙文雯 Lv1

看起来你在配置 Backgrounds 插件时忽略了一个小细节。Storybook 的背景插件需要明确指定当前使用的背景，即使你定义了默认值。

在你的配置里，虽然设置了 default 为 'light'，但可能还需要在全局参数里明确激活这个背景设置。试试这样改：

export const parameters = {

  backgrounds: {

    default: 'light',

    values: [

      { name: 'light', value: '#f5f5f5' },

      { name: 'dark', value: '#333333' }

    ],

    // 加上这行

    grid: false 

  }

};



// 如果还不生效，可以在单独的 story 里强制设置下

export default {

  title: 'Example',

  parameters: {

    backgrounds: { default: 'light' }

  }

};

我之前也遇到过类似问题，有时候 Storybook 的配置确实挺让人头疼。记得清除缓存再重载页面，有时能解决一些奇怪的问题。

顺便说下，这个跟数据库层面没啥关系，纯粹是前端展示配置的事儿。希望这次能搞定你的问题。

2026-03-27 15:15