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，注意：只需在应用外围包裹一次即可全局生效

 

?

1 2 3 4 5 6 7 8

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 样式类名
 });

参考：https://juejin.cn/post/7018008695237771277

三、如何在 css module 中 :global 重写 antd 样式

正确写法

 

 

问题 1：Modal.method() 无法展示弹窗。

解决方案：产生原因就不说了，antd 的 FAQ 有说明，感兴趣的可以看看。我们看下如何解决，在应用的入口处添加下方代码：

 

 

 

 

添加后我们发现 modal 可以正常弹出了。

notification 相似：

 

 

问题 2：DefaultFooter 组件的 css 名称不对，导致样式没有加载

解决方案：用 GlobalFooter 代替 DefaultFooter，代码如下：