【前言】

项目中需要引入公司统一封装包含登录页的资源包，但但但是这个资源包居然老到用的是antd3，于是就有了如标题所示需求。

【正文】

首先兼容两个antd版本，需要做的就是样式隔离。

因为项目中用的是antd4（资源包antd3），所以会对antd4样式文件进行处理。

方案：

1. 替换样式文件中的antd->antd-v4
2. 在使用antd4组件时，将classname样式名前缀antd替换antd4

替换样式文件中的antd->antd-v4

package.json

{
    "scripts":{
            "lessc:v4": "lessc --js --modify-var='ant-prefix=antd-v4' node_modules/antd/dist/antd.variable.less antd-v4.css"
    }
}

npm 运行命令 npm run lessc:v4

你将会在最外层文件夹下得到名为antd-v4.css文件

打开文件可以看到

antd-v4.css中所有的antd已经替换成antd4-v4

然后在项目入口文件index.ts中引入

import './antd-v4.css';

在使用antd4组件时，将样式名前缀antd替换antd4

在路由文件router.tsx中使用antd官方提供的ConfigProvider进行替换

router.tsx

import React from 'react';
import { ConfigProvider } from 'antd';

const Routers = () => {
  const antdPrefix = 'antd-v4';

  return (
    <ConfigProvider
      prefixCls={antdPrefix}
    >
          <App>
            <Switch>
              {
                routes.map(({ path, ...dynamics }, key) => (
                  <Route
                    exact
                    path={path}
                    component={dynamic({
                      app,
                      ...dynamics,
                    })}
                  />
                ))
              }
              <Route component={error} />
            </Switch>
          </App>
    </ConfigProvider>
  );
};

export default Routers;

做完这一步我们可以看到

项目中所有使用antd4组件的样式名已经替换成antd-v4

以上就是样式隔离所有内容啦。。。

拓展

在我的项目中其实不需要使用antd3，如果你的项目中需要使用antd3，以下是实现方案。

package.json

{
    "dependencies": {
        "antd-v3": "npm: antd@3.26.18",
    }
}

引用：

import { Button} from "antd-v3"

因为我们已经对antd4做了样式处理，所以antd3样式文件正常引入就行。

感谢您的阅读，有不足之处请为我指出！