将 Storybook Control 标签更改为其他名称答案

【问题标题】：Change Storybook Control label to a different name将 Storybook Control 标签更改为其他名称
【发布时间】：2021-12-05 20:58:28
【问题描述】：

我有一个自定义按钮组件和以下道具的一些基本控件；按钮种类、大小和子项（按钮文本）。

控件按预期工作。不过，我喜欢将控件命名从 "children" 更改为 "label"。

我将如何实现这一目标？

谢谢！

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
     kind: {
      options: ['primary', 'secondary', 'tertiary', 'danger', 'ghost'],
      control: { type: 'select' }
    },
    size: {
      options: ['default', 'sm', 'md', 'lg'],
      control: { type: 'select'},
    },
    },
};

const Template = (args) => <Button {...args} />;

export const Buttons = Template.bind({});
Buttons.args = {
  kind: 'primary',
  children: 'Button',

};

【问题讨论】：

标签： javascript reactjs storybook

【解决方案1】：

差不多了，在argTypes 中，您需要输入感兴趣的字段children，并设置要显示在故事控制面板上的自定义名称

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    // ...your previous code
    children: {
      name: "Label", // <---------
    },
  },
};

// ...your previous code

Buttons.args = {
  children: 'Button',
};

完成我的一个项目

【讨论】：