storybook-addon-grommet

一个在工具栏中添加 Grommet 主题选择器的 Storybook 插件

实时演示

grommet-controls

安装

npm i -D storybook-addon-grommet

配置

在你的 Storybook 配置中的 addons.js 文件中，注册 storybook-addon-grommet

import 'storybook-addon-grommet/register'

用法

在你的 config.js 中，定义你的主题配置并将其传递给 addDecorator 函数

import { addDecorator } from '@storybook/react'; // <- or your storybook framework
import { withGrommet } from 'storybook-addon-grommet';
import { grommet, dark } from 'grommet';
import { black, light, materialdark, materiallight, metro } from 'grommet-controls';

addDecorator(withGrommet({
    theme: 'grommet',
    themes: {
      grommet,
      dark,
      black,
      light,
      materialdark,
      materiallight,
      metro,
    },
    boxProps: {
      align: 'start',
    },
    grommetProps: {
        full: true,
    }
  }
));

预览

storybook-addon-grommet 用 <Grommet /> 和 <Box/> 组件包装预览故事，这些组件的属性是可配置的

<Grommet theme={themes[state]} {...grommetProps}>
  <Box {...boxProps}>
    {children}
  </Box>  
</Grommet>

选项

theme: 最初选择的主题 themes: 键为主题名称、值为主题对象的对象 boxProps: <Box /> 属性 grommetProps: <Grommet /> 属性