ant.design的使用姿势快照📷

记录时间：2022-05-12
题外话：boss如是说，写文档要star化，金字塔结构化，那就……来吧，一键格式化kakaka!

样式隔离实现

背景

公司内部平台采用了微前端架构，基座采用的antd是v3.x.x版本，子应用中使用了antd^4.12.3版本，笔者在开发的时候碰到了一个比较奇葩的问题，子应用中用到了Switch组件，结果到了线上长这样

（这是由于antd3和antd4版本各自给switch组件挂了一个div导致的）

目标

当然是让这个开关显示正常啊～～【用背景问题来写目标没错吧】

行动

1. 隔离基座和子应用当中的antd样式，通过给子应用配置@ant-prefix【ant官网】变量修改前缀，可以通过以下代码来配置：

// 方法1，config方法自 4.13.0+ 开始支持
import { ConfigProvider } from 'antd';

ConfigProvider.config({
    prefixCls: 'ant',
});

// 方法2
<ConfigProvider locale={zhCN} prefixCls="ant">
  <App />
</ConfigProvider>

修改完了之后，又出现了一个新的问题，代码中用到的message.error组件样式错误，查看控制发现message的class前缀还是ant，也就是说咱设置的前缀对message组件未生效，查看官网QA发现有相关问题，官网给出的解决方法如下图

方法2这种配置方式不支持，方法1【使用方法】经过测试，在单一组件内使用没有问题，但是没有达到全局修改的目的。 查看message、notification、Modal组件可以发现这三个组件都可以通过调用xxx.config()进行全局化配置（4.3.0+版本支持）

message.config({
  prefixCls: `${prefixCls}-message`,
})
Modal.config({
  rootPrefixCls: prefixCls,
})
notification.config({
  prefixCls: `${prefixCls}-notification`,
})

结果

由此解决了因antd版本冲突引起的样式问题。