一、背景

项目需要同时使用antdV2-vue和antdV3-vue的版本。

原因是想用antdV2里面的rangePicker。

最开始的方案是单独去github中迁移RangePicker的代码，但迁移过程中发现基本上会把antdV2大部分的组件都依赖到，那干脆一不做二不休让俩个版本共存，也不迁移代码了。

二、问题

当我们单独使用antdV2的组件的时候会发现样式不对劲。这个时候大家肯定能想到没引入antdV2的样式。

我们会尝试如下引用方式：

1.错误的解决方案一：在js中引入

<script lang="ts">import 'ant-design-vue-v2/dist/antd.css';
<script>

这样直接在js里面引入会影响全局antd的各种组件样式都错乱【antdV2和antdV3的css文件样式冲突导致的】

2.错误的解决方案二：css引入文件地址然后加scoped

<style scoped src="ant-design-vue-v2/dist/antd.css"></style>

这样会导致你引入无效，因为是scoped只会在当前的文件里面生效

三、解决方案

最后我们在对应的组件文件中去引入该组件专属对应的css文件即可。【注意style不要加scoped，否则就无法生效了】

<style>@import url('../../node_modules/ant-design-vue-v2/es/date-picker/style/index.css');
</style>

四、结语

本文讲的是vue项目中用ant-design-vue，react用antd的话也是类似的道理。如果大家实在弄不来的话可以给笔者留言（看到了会协助你进行解决），然后笔者后面追加一个react的解决过程。

解决同时使用antd俩个不同版本的样式错乱问题相关推荐

解决 .net core 中 nuget 包版本冲突问题
解决 .net core 中 nuget 包版本冲突问题参考文章: (1)解决 .net core 中 nuget 包版本冲突问题 (2)https://www.cnblogs.com/dudu/p ...
解决Firefox已阻止运行早期版本Adobe Flash
解决Firefox已阻止运行早期版本Adobe Flash 类别 [随笔分类]web 解决Firefox已阻止运行早期版本Adobe Flash 最近火狐浏览器不知抽什么风,每次打开总提示&qu ...
[Unity][FlowCanvas] FlowScript 搜索功能不可用的解决办法：更新 UnityEditor 的版本
FlowScript 搜索功能不可用的解决办法:更新 UnityEditor 的版本我原来的版本是 2020.3.0f1c1,装了一个 2020.3.9f1c1 就正常了好神奇图1 搜索功能不可 ...
python3.7不能用_解决Python3.7.0 SSL低版本导致Pip无法使用问题
终于下决心把python从2.7升到了3.7.懒人安装当然使用Anaconda. 安装成功,编译成功.但是用pip 安装包的时候提示: pip is configured with locations ...
解决 Java poi 3.8 等版本操作 word 插入图片不成功的问题
解决 Java poi 3.8等版本操作word插入图片不成功的问题问题: 最近有一个需求是将Excel中的数据转换到word中,其中包括了文字和图片, 在使用 poi 3.8 向word中写入图片 ...
解决奔腾处理器在tensorflow高版本下报动态链接库(DLL)初始化例程失败
解决奔腾处理器在tensorflow高版本下报动态链接库(DLL)初始化例程失败 tensorflow高版本(1.5以上)官方貌似只支持AVX2指令集的cpu使用(tensorflow-gpu版本也是 ...
解决win7win10系统安装金蝶k3老版本客户端问题
首页解决方案正文解决win7win10系统安装金蝶k3老版本客户端问题 amen 阅读:883 2018-05-25 17:08:52 评论:0 1.开启administrator系统管理员用户 ...
解决Pthon中无法安装旧版本TensorFlow问题
解决Python中无法安装旧版本TensorFlow问题前言一.报错信息二.报错原因三.解决方案 conda命令学习最终解决如何使用新创建的环境 pycharm Jupyter 前言当我 ...
【疑难解决】华为eNSP工具（版本1.3.00.100）开启AR路由器出现40报错问题进行解决分析
[疑难解决]华为eNSP工具(版本1.3.00.100)开启AR路由器出现40报错问题进行解决分析 [疑难解决]华为eNSP工具(版本1.3.00.100)开启AR路由器出现40报错问题进行解决分析 ...

解决同时使用antd俩个不同版本的样式错乱问题

文章目录