文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在故事簿中添加样式道具作为控件？

问如何在故事簿中添加样式道具作为控件？
EN

Stack Overflow用户

提问于 2021-04-09 08:57:28

回答 3查看 3K关注 0票数 4

我正在建立一个设计系统库在反应和TypeScript使用故事簿。大多数组件支持使用style支柱设置自定义样式。我正在尝试使用控件特性在故事簿中反映这一点。

考虑使用变体并尝试添加样式道具的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的正确格式是什么？

reactjs

typescript

storybook

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-04-10 14:38:55

正如文档中所建议的

默认情况下，Storybook将根据arg的初始值为每个arg选择一个控件。若要使用自动检测控件和React，必须在故事元数据中填写component字段：

例如：

import { Button } from './Button';

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

故事书使用它为您的组件自动生成基于PropTypes (使用反应基因)或TypeScript类型(使用react docgen类型记录)的组件。

因此，要自动生成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
    }
  }
};

下面是一个快照：

票数 1

Stack Overflow用户

发布于 2021-11-08 18:56:58

这是@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',
        },
      }
    }
  }

道具

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',
  ],
}

票数 0

Stack Overflow用户

发布于 2022-01-14 22:38:41

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67018066

复制

相似问题

问如何在故事簿中添加样式道具作为控件？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在故事簿中添加样式道具作为控件？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在故事簿中添加样式道具作为控件？
EN