react项目同时拥有antd4及antd5

背景:

公司项目做大规模antd4-antd5的升级工作，但是直接覆盖替换会有大量bug产生，且切换周期较短，所以采用antd4和antd5并行逐渐升级

实现:

在 package.json 文件中的 "antd5": "npm:antd@5.x" 这条数据意味着你想安装名为 "antd" 的npm包，版本号5.x（x 可为任何数字，根据最新版本来）。

这是一种特殊的 npm 语法，npm:antd@5.x 表示你要安装的是 npm 仓库上的名为 "antd" 的包，"@5.x" 表示你想要这个包的 5.x 版本。

当你在 package.json 文件中写 "antd5": "npm:antd@5.x"，在你运行 npm install 或 npm update 的时候，npm 将会获取并安装 "antd" 包的最新 5.x 版本，并将它映射到该项目下名为 "antd5" 的别名中。这就意味着，你可以通过 require('antd5') 或 import ... from 'antd5' 在代码中来使用这个包。这种方式常常用来在项目中并行使用同一包的不同版本。

下载后效果:

如何引用:

产生的问题:使用两个版本可能导致样式表冲突，使得UI行为和预期表现不一致。

解决方法:我采用的了自定义样式名的方式:prefixCls加自定义前缀名，并配置token做专属主题

效果:ant前缀变为了zgh，之前antd4写的样式不会影响antd5