antd 样式隔离实现

二、修改 antd 的 css 前缀 

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

1.  
   /**
2.  
   * @file theme
3.  
   */
4.  
   const { prefix } = require('../config/defaultSettings');
5.  
   const theme = {
6.  
   'ant-prefix': prefix,
7.  
    
8.  
   };
9.  
   module.exports = theme;
10.  
     
11.  
    /**
12.  
    * @file config
13.  
    */
14.  
    import theme from '../theme';
15.  
    const { prefix } = require('../config/defaultSettings');
16.  
    export default defineConfig({
17.  
    theme,
18.  
    antd: {
19.  
    config: {
20.  
    prefixCls: prefix, # 修改HTML里面的类名前缀
21.  
    },
22.  
    },
23.  
    lessLoader: { modifyVars: { '@ant-prefix': prefix } }, # 对应修改生成的 antd 样式类名
24.  
    });

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

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

正确写法

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

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

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

notification 相似：

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

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