antd + umi 换肤功能技术记录

相关技术

antd动态主题技术.

• 该功能通过动态修改 CSS Variable 实现，因而在 IE 中页面将无法正常展示。请先确认你的用户环境是否需要支持 IE。
• 该功能在 antd@4.17.0-alpha.0 版本起支持。

less中antd变量的使用.

• background-color:var(–color1)

技术实现

引入 antd.variable.min.css

import 'antd/dist/antd.variable.min.css'

静态方法配置

import { ConfigProvider } from 'antd';

ConfigProvider.config({
  theme: {
    primaryColor: '#25b864',
  },
});

冲突解决（暂未使用）

默认情况下，CSS Variable 会以 --ant 作为前缀。当你的项目中引用多份 css 文件时，可以通过修改前缀的方式避免冲突。

代码调整

通过 ConfigProvider 在顶层修改 prefixCls：

import { ConfigProvider } from 'antd';

export default () => (
  <ConfigProvider prefixCls="custom">
    <MyApp />
  </ConfigProvider>
);

通过静态方法设置主题色以及对应 prefixCls：

ConfigProvider.config({
  prefixCls: 'custom',
  theme: {
    primaryColor: '#25b864',
  },
});

编译 less

由于前缀变更，你需要重新生成一份对应的 css 文件。

lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css

配置less变量

//  src/assets/style/theme.less
@mainMenuColor: var(--ant-primary-color);