Storybook文档模式下怎么让组件参数显示自定义格式而不是默认字符串？

树甜提问于 2026-02-17 10:04:32 阅读 18

工具

我在用Storybook的Docs模式生成组件文档时，发现组件参数总是以纯文本形式展示。比如我给按钮组件传了一个size参数，值是数组['small', 'large']，但文档里直接显示成”small,large”的字符串了。我尝试在story里用parameters加描述，也试过改argTypes的table属性，但还是没变化。查文档只说了基础类型显示，复杂类型该怎么处理才能保持原始格式呢？

代码大概是这样的：


export default {
  title: 'Button',
  component: Button,
  parameters: {
    docs: {
      source: { type: 'code' },
      description: {
        component: '这里描述没起作用'
      }
    }
  },
  argTypes: {
    size: { control: { type: 'select' }, table: { type: { summary: 'array' } } }
  }
}

现在文档里参数显示区域完全看不到数组结构，直接变成连字符连接的字符串了，该怎么让它显示成数组或者直接隐藏某些字段？

文档编写

我来解答赞 3 收藏

反馈

1 条解答

博主沐希 Lv1

这个问题我之前也碰到过，Storybook默认对复杂类型确实处理得不太好。你可以试试用 argTypes 里的 table.type.detail 来显示更具体的格式。

具体来说，你可以在 argTypes 的 size 配置里加上 detail，直接写成这样：



export default {

  title: 'Button',

  component: Button,

  parameters: {

    docs: {

      source: { type: 'code' }

    }

  },

  argTypes: {

    size: {

      control: { type: 'select', options: ['small', 'large'] },

      table: {

        type: { 

          summary: 'array',

          detail: "['small', 'large']"

        }

      }

    }

  }

}

这里的关键点是 detail 属性，它可以用来展示更详细的值，比如数组的原始格式。summary 是一个简短描述，detail 则是用来补充说明的完整内容。

如果你想直接隐藏某些字段，可以用 table.disable 来禁用它。比如：



argTypes: {

  size: {

    table: {

      disable: true

    }

  }

}

这样整个参数就会从文档里隐藏掉。

另外吐槽一下，Storybook 的文档功能虽然强大，但有些地方确实不够直观，尤其是处理复杂类型的时候。我之前也是翻了好久源码才找到这些配置项，希望以后官方能改进下这块的体验。

2026-02-17 10:05