scoped与覆盖第三方组件样式

vue中有很多第三方的UI库如：ElementUI、iView等，样式丰富且使用起来很方便，但在真实的使用场景中，我们可能需要在某些地方修改第三方组件的样式，但是通过传统方式，修改却不生效，以下是对于vue-scoped的理解，和如何覆盖第三方组件样式的总结。

1. 什么是 Scoped ？

• 作用

  在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，可以使组件之间的样式不会相互污染。

• 原理

  scoped的原理就不细说了，大致就是： 会将css编译成唯一的 如：.a[data-v-f3f3eg9]，类似于这种，从而使样式只在本组件中生效。

2.如何覆盖修改组件样式

• 引入reset.css全局修改

  如果想在项目中，各个地方均对某个组件的样式进行修改，可以通过在 main.js中引入全局样式，同时reset.css 文件的主要作用是对基本样式进行设置，从而实现在不同的浏览器下效果一样。

• 与scoped标签的style分离

  既然是因为 <style scoped lang="less"> 中的 scoped，才导致我们不能修改第三方组件的样式，那我们直接去掉 scoped 呢？ 直接去掉后，可以修改，但也就意味着不能使用 scoped的特性，我们可以 在此组件中 再写一个 <style> </style> , 不带scoped， 也就是全局样式，这样我们就能将本组件中的 全局样式 和 局部样式区分开；

  同时，为了避免修改了其他地方使用此组件的样式， 我们可以 往上多写两级 本组件自身的选择器，从而将范围缩小的本组件内，不对其他地方造成影响；

• deep深度选择器

  如果既想使用 scoped特性，又不想单独写一个style， 可以使用CSS的 深度选择器如：想修改element的table组件的header的样式，可以在选择器中间加上 /deep/, .table-container为此组件自身的class，Demo中 使用的是 less， 如果使用的是CSS就将 /deep/ 改为 >>> ，可以达到同样的效果

  <style lang="less" scoped>
    
      .table-container /deep/ .el-table__header-wrapper{
          background-color: lightskyblue;
          font-size: 18px;
      }
  
  </style>
  

建议使用第二、三种方式修改，reset.css还是用来修改默认的基础样式。

以上， 就是vue中常用的覆盖第三方组件的样式的方法，可以结合具体情况，选择何种方式，不再被覆盖组件样式所折磨。