vue中修改第三方组件的样式？教你一招

在vue项目中，我们会用到很多第三方组件库，当我们使用第三方组件库的时候，有时会遇到需求样式与封装的第三方组件样式有偏差。这时我们就要去改第三方的样式。
在前段时间做项目就遇到了这个问题，刚开始想着在组件标签上加一个class或者id，然后通过css选择器进行style样式修改。然后我尝试了好多次，发现改不动！！！！。最后，去网上参考了一些方案，发现改不动的原因是出现在style标签中的scoped属性上。
所以我想到的是去掉scoped属性。
但是当我去掉scoped属性的时候，发现其他组件的样式，有一些发生了变化。由于scoped影响了样式私有化。下的我反手一个Ctrl + Z,撤了上一步的操作。所以scoped这个属性要慎用。

1.将scoped属性去掉。
优点：方便快捷
缺点：失去了样式的保护，我们就需要用原始的方法保护该组件的样式作用于，可通过后台选择器等等方式实现样式的保护，使其不受污染。

但是，问题还没有解决啊。
不慌，还有一波操作。
又翻阅了一些大佬的文章，可以使用vue样式穿透解决。
大家可以了解下vue中的样式穿透，也是解决样式问题的常用方式之一。

stylus的样式穿透 使用>>>

外层 >>> 第三方组件
样式

.wrapper >>> .swiper-pagination-bullet-active
background: #fff

sass和less的样式穿透 使用/deep/

外层 /deep/ 第三方组件 {
样式
}
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff;
}

这样就解决了。
用到实际项目中的话，具体操作可以先在组件标签上添加一个class，然后再穿透到第三方组件的class上进行样式更改。

Html：

<el-input
      placeholder="请输入内容"
      v-model="input.explain"
      type="textarea"
      class="textarea"
      clearable>
</el-input>

Style：

<style scoped>
.textarea >>> .el-textarea__inner{
  font-family: '微软雅黑'
}
<style>

改变了输入框输入的字体样式。
这样就可以了。