解决vant 无法修改组件的样式问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

问题描述

在vue中，常规写style都会加上scoped，以避免全局污染，但是加上了scoped会导致无法修改 vant UI框架组件本身的样式，但是scoped是不能省略的。为了解决这个问题，本人尝试了多种方法都不行，最后，通过新建一个新的css文件并导入当前vue页面的方式得以解决。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、尝试过的方法（失败）

1.标签前加上 /deep/

代码如下（示例）：

/deep/.van-tx{
	font-size: 0.3rem;
	font-weight: 400;
	text-align: left;
	color: #000000;
}

2.标签前加上 ::v-deep

代码如下（示例）：

::v-deep.van-tx{
	font-size: 0.3rem;
	font-weight: 400;
	text-align: left;
	color: #000000;
}

3.标签前加上 >>>

代码如下（示例）：

>>>.van-tx{
	font-size: 0.3rem;
	font-weight: 400;
	text-align: left;
	color: #000000;
}

---

运行后，以上三种方法都没有改变vant组件样式。

---

二、成功的方法（定义一个全局的样式文件）

在assets目录内新建一个css文件,专门存放这些需要被重新修改的样式代码. 并且以组件的类名来进行维护。 最后引入一个全局css文件即可。操作如下图：

---

运行后，成功修改样式。

---