自訂 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. 設定預設故事狀態

您可以透過在 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,
  },
};