Storybook 的 Controls 为啥不显示我定义的 prop 控件？

Mc.瑞丹提问于 2026-02-23 22:57:18 阅读 58

工具

我在写一个 React 组件的 Story，明明在 default export 里加了 argTypes，但 Controls 面板就是不显示对应的控件，比如这个：

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    size: {
      control: { type: 'select', options: ['small', 'medium', 'large'] }
    }
  }
};

结果 Storybook 里 Controls 根本没出现 size 这个选项，是我哪里漏了吗？

我来解答赞 12 收藏

反馈

2 条解答

绍博 Lv1

我之前也遇到过这个问题，多半是忘了在 story 里使用那个 prop。检查下你的 story 定义，得这样写：

export const Basic = (args) => <Button size={args.size} />;

Basic.args = { size: 'medium' };

别忘了在组件里也要接收这个 prop，不然 Storybook 找不到它就直接忽略了。累死我了，每次都要反复确认这些小细节。

2026-03-26 10:16

W″亦凡 Lv1

你这个写法本身没问题，但 Storybook 的 Controls 面板只对被组件真正接收的 props 生效，关键点在于：你的 Button 组件是不是真的接收了 size 这个 prop？如果组件内部没用到它，或者你用的是 TypeScript 但没把 size 写进类型定义里，Controls 就不会识别出来。

官方文档里说，argTypes 里的控件要生效，必须满足两个条件：一是组件确实接收这个 prop，二是 Storybook 能通过类型推断或 manual 配置识别它。

常见坑是：你用了 TypeScript，写了 interface ButtonProps { size?: string }，但没加类型注解到组件的参数上，比如写成 const Button = (props) => { ... } 而不是 const Button: React.FC = (props) => { ... }，这样 Storybook 就推断不出 size 是个 prop，Controls 自然不显示。

另外确认下 Storybook 版本，如果是 v7+，记得组件要通过 React.forwardRef 或 React.memo 包裹时，也要显式写 propTypes 或用 TypeScript 正确注解，不然也会被忽略。

如果确认组件接收了 size 但还是不显示，可以在 Story 里加个 args: { size: 'medium' } 试试，有时候 Storybook 要看到初始 args 才会激活控件。

2026-02-23 23:03