如何将Storybook Control中按钮组件children属性的显示名修改为label

你只需要在原有argTypes配置中新增children属性的配置，通过name字段指定Control面板的展示名称为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'},
    },
    // 新增children配置修改展示名
    children: {
      name: 'label',
      control: { type: 'text' }
    }
  },
};

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

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

配置完成后，Control面板上原来的children输入项就会显示为label，输入的内容仍会正常绑定到组件的children属性，不影响原有组件的运行逻辑。

内容的提问来源于stack exchange，提问作者redongreen