antd 样式隔离实现

前端项目的组件库都使用的是 And Design，当一个系统作为另一个系统的子应用时，antd 样式嵌套会出现莫名的样式问题，以及一些在 global 中声明的 antd 样式，会全局污染。基于这种现状，我们需要一个方式将系统之间的 antd 样式进行隔离。

好了，我们看下如何实现，以及实现后带来的一些并发问题如何解决吧。

前置知识点

首先为了统一管理和维护，首先我们将要修改的 antd prefixCls 变量维护在 defaultSettings 文件中，defaultSettings 文件的作用是维护一些系统的基础配置。

/**
* @file defaultSettings
*/
export const prefix = 'ant-r';

一、修改 dom 元素上的 class 名称

使用 antd 的 ConfigProvider 全局化配置，将 prefixCls 默认值 ant 修改为 ant-r，注意：只需在应用外围包裹一次即可全局生效

import { ConfigProvider } from 'antd';
import { prefix } from '../../../config/defaultSettings';
 
export default () => (
  <ConfigProvider prefixCls={`${prefix}`}>
    <App />
  </ConfigProvider>
);

二、修改 antd 的 css 前缀

将 antd css 前缀默认值 ant 改为 ant-r，如果是 umi 项目的话直接在 config 的 theme 属性 中配置即可

/**
* @file theme
*/
const { prefix } = require('../config/defaultSettings');
const theme = {
  'ant-prefix': prefix,
  
};
module.exports = theme;
 
/**
* @file config
*/
import theme from '../theme';
 const { prefix } = require('../config/defaultSettings');
 export default defineConfig({
  theme,
  antd: {
    config: {
      prefixCls: prefix, # 修改HTML里面的类名前缀
    },
  },
  lessLoader: { modifyVars: { '@ant-prefix': prefix } }, # 对应修改生成的 antd 样式类名
 });