前端项目的组件库都使用的是 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 样式类名
});
参考:https://juejin.cn/post/7018008695237771277
三、如何在 css module 中 :global 重写 antd 样式
正确写法
问题 1:Modal.method() 无法展示弹窗。
解决方案:产生原因就不说了,antd 的 FAQ 有说明,感兴趣的可以看看。我们看下如何解决,在应用的入口处添加下方代码:
添加后我们发现 modal 可以正常弹出了。
notification 相似:
问题 2:DefaultFooter 组件的 css 名称不对,导致样式没有加载
解决方案:用 GlobalFooter 代替 DefaultFooter,代码如下: