自定义 Ant Design 主题

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. 设置默认故事状态

您可以通过在 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,
  },
};