javascript - 带有背景参数的故事书的问题

Question

我正在进行一个带有故事书的项目，我希望我的故事能够更改背景或放置任何背景，因为我只需要不同颜色的背景，但我不能像文档中所说的那样放置背景:
https://storybook.js.org/docs/react/essentials/backgrounds

export default {
  title: 'Button',
  parameters: {
    backgrounds: {
      default: 'twitter',
      values: [
        { name: 'twitter', value: '#00aced' },
        { name: 'facebook', value: '#3b5998' },
      ],
    },
  },
};

我的代码是这样的:

export default {
  title: "Atoms/Example",
  component,
  parameters: {
    backgrounds: {
      default: "black",
      values: [
        { name: "black", value: "#000000" },
        { name: "white", value: "#ffffff" }
      ]
    }
  },
  argTypes: {
    is: {
      control: {
        type: "select",
        options: [25, 33, 50, 75, 100]
      }
    }
  }
}

但我的代码根本不起作用，从文档中看到一切都是正确的。
或者是否有任何方法可以为我的故事添加背景，即使它不是动态的，如果不是固定的

Answer 1

确保您有 @storybook/addon-backgrounds安装在.storybook/main.js文件确保它在你的插件中:addons: ['@storybook/addon-backgrounds']注意确保其:addons: ['@storybook/addon-backgrounds']并不是addons: ['@storybook/addon-backgrounds/register']使用 register是旧方法，会阻止它正常工作