如何在 Storybook 中添加样式道具作为控件？

Question

我正在使用 Storybook 在 React 和 TypeScript 中构建一个设计系统库。大多数组件支持使用 style 属性设置自定义样式。我正在尝试使用 Controls 功能在 Storybook 中反映这一点。

考虑以下具有变体的 Button 故事并尝试添加样式道具：

// Button.stories.js

import { Button } from './button';

export default {
  component: Button,
  title: 'Button',
  argTypes: {
    variant: {
      control: {
        type: 'radio',
        options: ['primary', 'secondary']
      }
    },
    style: {
      control: {
        type: 'text'
      },
      defaultValue: '{marginBottom: 10}'
    }
  }
};

当样式道具的类型是 React.CSSProperties 时，我应该使用什么正确的控件类型？ defaultValue 的正确格式是什么？

Answer 1

如 docs 中所建议：

By default, Storybook will choose a control for each arg based on the initial value of the arg.

To use auto-detected controls with React, you must fill in the component field in your story metadata:

例如：

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button, // Here
};

Storybook uses this to auto-generate the ArgTypes for your component based on either PropTypes (using react-docgen) or TypeScript types (using react-docgen-typescript).

因此，要自动生成style控件，您可以这样写：

export default {
  component: Button, // This is must
  title: 'Button',
  argTypes: {
    variant: {
      control: {
        type: 'radio',
        options: ['primary', 'secondary']
      }
    },
    style: {                             // Remove the control type
      defaultValue: { marginBottom: 10 } // Keep it as object
    }
  }
};

这是一张快照：

Answer 2

如果以上内容对您不起作用，这里是@AjeetShah 答案的更新版本。

button.stories.jsx

export default {
  component: Button, 
  title: 'Button',
    argTypes{
       style: {
        name: 'style',
        defaultValue: {},
        type: { name: 'style', required: false },
        table: {
          type: {
            summary: 'StyleProp',
            detail: null,
          },
          defaultValue: { summary: '' },
        },
        control: {
          type: 'object',
        },
      }
    }
  }

Screenshot of the above using an sx prop

package.json

"@storybook/addon-essentials": "6.3.12",
"@storybook/react": "6.3.12"

.storybook/main.js

module.exports = {
  stories: [
    '../path/to/my/stories/*.stories.jsx',
  ],
  addons: [
    '@storybook/addon-essentials',
  ],
}

Answer 3

argTypes: {
  style: { control: 'object' }
}

如何在 Storybook 中添加样式道具作为控件？

How can I add style prop as control in Storybook?

typescript

reactjs

storybook