Vue项目中覆盖UI库的样式

现在大家开发一般都会用到一些UI库，但是这些UI库的组件样式一般都是写好的。这样导致我们可能会需要修改一些样式。

在Vue开发中，我们vue文件的样式都是写在<style lang="less" scoped></style>标签中的，加scoped是为了使得样式只在当前页面有效。使用scoped之后，实际的html中都会被加上[data-v-xxx]这个属性。但是第三方组件内部的标签并没有编译为附带[data-v-xxx]这个属性。

所以该怎么更改组件样式呢？

方法一：

给第三方组件写个class，然后在一个公共的css文件中或者在当前页面再写一个没有socped属性的style标签，然后直接在里面修改第三方组件的样式。又或者找到对应组件的class类名，直接进行修改。

这样不失为一个方法，但是存在全局污染和命名冲突的问题。约定特定的命名方式，可以避免命名冲突。但是还是不够优雅。

方法二：

通过深度作用选择器（>>>和/deep/）

.van-tabs /deep/ .van-ellipsis { color: red};

当然了这里的深度选择器/deep/是less语言下的语法，如果你没有使用less/sass等，可以用>>>符号。