README-zh_CN.md

---

storybook-addon-customize-antd-theme

一个Storybook插件， 它可以辅助你可视化定制 ant design 主题。

• Docs & Demo

English | 简体中文

要求

• Storybook@>=6.0.0

使用

1. 安装

npm install -D storybook-addon-customize-antd-theme
# yarn add -D storybook-addon-customize-antd-theme

2. 在 main.js 注册本插件

另外建议导入本插件的一个 antd storystorybook-addon-customize-antd-theme/dist/esm/stories/index.js

module.exports = {
  stories: ['storybook-addon-customize-antd-theme/dist/esm/stories/index.js'],
  addons: ['storybook-addon-customize-antd-theme'],
};

3. 设置 story 的默认状态

你可以在 preview.js 初始化导入一个 ant design 主题，在parameters上设置属性customizeAntdTheme：

// .storybook/preview.js

export const parameters = {
  customizeAntdTheme: {
    modifyVars: {
      'primary-color': '#ff1771',
      'border-radius-base': '20px',
    },
  },
};

modifyVars 也可以是 less string，可以通过 webpack 插件raw-loader导入一个 antd design 主题 less 文件，例如：

// .storybook/preview.js
import themeLess from '!!raw-loader!../src/theme/theme.less';
export const parameters = {
  customizeAntdTheme: {
    modifyVars: themeLess,
  },
};