@giteeteam/apps-team-theme v0.2.0

Team antd V5 Style

安装

yarn add @giteeteam/apps-team-theme -S or npm i @giteeteam/apps-team-theme -S

使用

编译时

1. 直接使用 themeToken

const { themeToken } = require('@giteeteam/apps-team-theme/lib')
//webpack less-loader 配置
  const lessLoaderOptions = {
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: themeToken,
    },
  };

2. 自己生成 token

  const { theme } = require('antd/lib') // antd > 5.6.0
  const { themeConfig } = require('@giteeteam/apps-team-theme/lib')
  const token = getDesignToken(themeConfig);

  //webpack less-loader 配置
  const lessLoaderOptions = {
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: token,
    },
  };

3. 自定义生成 token

  const { theme } = require('antd/lib') // antd > 5.6.0
  const { generateToken } = require('@giteeteam/apps-team-theme/lib')
  const token = generateToken(customThemeConfig);

  //webpack less-loader 配置
  const lessLoaderOptions = {
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: token,
    },
  };

运行时

import { themeConfig } from '@giteeteam/apps-team-theme/lib'

<div id="root">
  <ConfigProvider theme={themeConfig}>
    {/* {children}  */}
  </ConfigProvider>
</div>