具有背景参数的故事书的问题

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是旧方法，会阻止它正常工作