故事书隐藏或显示特定于故事的参数答案

【问题标题】：Storybook hide or show args specific to a story故事书隐藏或显示特定于故事的参数
【发布时间】：2022-07-19 23:09:48
【问题描述】：

我有一个 Storybook 项目和一个如下所示的组件：

export default {
    title: 'MDButton',
    argTypes: {
        label: {
            name: "Label",
            defaultValue: "Button",
            control: {
                type: "text"
            }
        },
        disabled: {
            name: "Disabled",
            defaultValue: false,
            control: {
                type: "boolean"
            }
        }
   }
};

这些是故事：

export const Default = Template.bind({});
Default.args = {};

export const WithDisabled = Template.bind({});
WithDisabled.args = {};

我希望第一个故事不有禁用的 arg。
这可能吗？
我知道我可以通过args 过滤掉我不想要的东西，但是如果我有大量的参数怎么办？

【问题讨论】：

您是否尝试过不为默认导出定义禁用的 argsType 并直接在 WithDisabled.argTypes 上定义它？或者如何覆盖WithDisabled.argTypes = { disabled: { control: null } } 之类的默认值？

标签： reactjs storybook

【解决方案1】：

您可以使用下一个代码禁用特定的 arg 道具。 MDX 格式的示例。

<Meta
  title="Title"
  component={YourComponent}
  argTypes={{
    icon: { table: { disable: true } },
    label: { table: { disable: true } },
    onClick: { table: { disable: true } },
  }}
/>

祝你好运！

【讨论】：