如何在Storybook中为控件配置自定义标签？枚举值显示异常

问题核心是你配置的labels键与options中的值不匹配，导致自定义标签未生效。你的options使用的是枚举的数值（32、50、100），但labels的键却是字符串名称（Default、Small），两者无法对应。

正确配置方式 #

修改argTypes中size的配置，让labels的键直接对应枚举的数值：

size: {
  options: [sizes.small, sizes.default, sizes.large],
  control: {
    type: 'radio',
    labels: {
      [sizes.small]: 'Small',
      [sizes.default]: 'Default',
      [sizes.large]: 'Large'
    },
  },
}

为什么之前的配置无效？ #

• 你之前用Default、Small作为labels的键，但options里是枚举的数值（如sizes.default对应50），键值不匹配，所以Storybook无法替换标签。
• 直接将options设为sizes时，Storybook会遍历枚举的键值对，所以同时显示名称和数值，但组件实际需要的是数值类型，而名称对应的是枚举的字符串键，因此只有名称点击时无法正确传递数值（组件不识别字符串类型的尺寸值）。

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