定制 antd 主题

storybook-addon-customize-antd-theme

一个 Storybook 插件，可帮助您在插件面板中可视化定制 Ant Design 主题，以改善 UI 开发工作流程。

• 文档 & 演示

英文 | 简体中文

要求

• Storybook@>=6.0.0

入门

1. 安装

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

2. 在 main.js 中注册插件

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

3. 设置默认 story 状态

您可以通过在 parameters 上设置 customizeAntdTheme 属性来初始设置 Ant Design 主题

// .storybook/preview.js

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

modifyVars 也可以是 less 字符串，例如您可以通过 raw-loader 导入一个 less 文件

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