Storybook 中如何正确传递 props 给组件？

欧阳子钊提问于 2026-03-04 08:33:17 阅读 449

工具

我在写 Storybook 的 stories 时，想给一个 React 组件传 props，但试了几次都没生效。比如我有个 Button 组件，期望传入 variant=”primary”，但预览里样式没变。

我现在的写法是这样：

export const Primary = () => <Button variant="primary">Primary</Button>;

但控制台没报错，就是样式不对。是不是应该用 args 或者 decorators？之前看文档有点晕，不知道哪种方式才是推荐的写法。

我来解答赞 4 收藏

反馈

1 条解答

Mc.芯依 Lv1

你的写法虽然也能跑，但我一般直接用 args，这样既能少写点代码，还能在控制面板里直接改 props 调试，不用频繁改文件。

import Button from './Button';



export default {

  title: 'Components/Button',

  component: Button,

};



export const Primary = {

  args: {

    variant: 'primary',

    children: 'Primary',

  },

};

2026-03-04 09:12