Javascript 使用Storybook呈现多个变体

我正在为使用React构建的库构建我的故事书文档，我没有找到在同一页面中呈现多个变体的简单方法

到目前为止，我得到的是这样的东西

const Template = (args, { argTypes }) => <Title {...args} />

export const Primary = Template.bind({});
export const Success = Template.bind({});
export const Warning = Template.bind({});
export const Inverse = Template.bind({});
export const Default = Template.bind({});
export const Info = Template.bind({});
export const Danger = Template.bind({});
export const Disabled = Template.bind({});

Primary.args = {
  children: 'Primary',
  level: 3, // <- this can go from 1 to 5,
  as: 'h1', 
  variant: 'primary',
}

Success.args = {
  children: 'Success',
  level: 3, // <- this can go from 1 to 5,
  as: 'h1',
  variant: 'success',
}

const-Template=（args，{argTypes}）=>
export const Primary=Template.bind（{}）；
export const Success=Template.bind（{}）；
export const Warning=Template.bind（{}）；
export const Inverse=Template.bind（{}）；
export const Default=Template.bind（{}）；
export const Info=Template.bind（{}）；
export const Danger=Template.bind（{}）；
export const Disabled=Template.bind（{}）；
Primary.args={
儿童：'小学'，
级别：3，//您可以使用
装饰器来渲染一个故事中组件的多个实例

示例代码（应与您的代码类似）：

export const Primary=Template.bind（{}）；
Primary.args={
小学：对，
标签：'按钮'，
};
Primary.decorators=[
() => {
返回(
);
},
];

输出：


此外，还有3个级别的
装饰程序
，值得一读：

故事层
组件级
全球一级
太酷了。谢谢你的回答。
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Primary.decorators = [
  () => {
    return (
      <>
        <Button {...Primary.args as ButtonProps} level={1} />
        <Button {...Primary.args as ButtonProps} level={2} />
        <Button {...Primary.args as ButtonProps} level={3} />
      </>
    );
  },
];