目录

存在问题

为何修改修改UI组件的样式会不生效

如何修改UI组件样式

1，去除style标签上的scoped属性

2，使用UI组件自带的custom-class属性

3，使用深度选择器

4，去除scoped元素的同时使用深度选择器 /deep/

开发项目的时候一般会使用第三方UI框架，如elementUI、Vant，uni-ui，uView等，那么就存在一个比较棘手的问题，就是样式修改：

1，一般在修改UI框架自带的样式时有时很难生效

2，或者只是想要修改当前组件内UI组件的样式，而不影响全局

3，在style标签携带scoped元素的时候就很难覆盖UI框架的样式

~不关心原理可以跳过~

在编写vue组件代码的时候，为了避免样式污染，每个页面的 style 标签都会加上 scoped 属性，vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保本组件的样式不会污染全局，这就是 scoped 属性的原理。

比如下面代码

打开浏览器，查看控制台，样式如下：

修改elementUI  input 组件的样式，如上面代码，

原因：

因为 data-v-xxx 属性只加在UI组件（子组件）的第一层，子组件中其他 DOM 元素是没有 data-v-xxx 这个属性的，而你写在 带有 scoped 属性的 style 标签中的样式编译后都会被添加 data-v-xxx 属性，样式只作用于有 data-v-xxx 这个属性的DOM，而真实的UI组件内部DOM元素上并没有被添加 data-v-xxx 属性，所以样式不会生效。

就比如 el-input__inner 的样式不会生效，那么可以使用深度选择器来修改。

vue中是允许写多个style标签的，所以可以重新定义一个不带scoped属性的style标签，如下

为了避免样式污染，可以在需要修改的UI组件的外层添加自定义class等，向下包含UI组件的样式代码，这样可以防止影响到别的组件。

一些UI组件向外提供了接口，可以使用类似 custom-class 或者 custom-style 等的属性来修改UI组件的样式，具体使用根据UI框架不同，使用方式不同。

也可以参考第一条，定义 custom-class 类包裹UI组件类，修改样式。

深度选择器有多种写法，比如

以上写法都是可以的，但是具体使用根据场景不同，写法不同。 一般情况，stylus的样式穿透 使用>>>， sass和less的样式穿透 使用/deep/，在vue3中可以会出现/deep/编译报错，可以使用::v-deep。

深度选择器的工作原理，如下样式代码：

 将会编译成：

 修改VantUI中search组件的样式：

修改elementUI    textarea样式

有的时候上面的所有方法你已经都试过了，但是还是不能修改UI组件的样式，那么你可以在不带 scoped 属性的 style 标签内修改。