Vue style 穿透样式选择器

开发vue项目中经常会引入一些组件，无论是自定义组件还是引入的外部组件，style标签上经常会设置scoped属性，vue组件编译后，会将 template 中的每个元素加入[data-v-xxxx]属性来确保style scoped仅本组件的元素而不会污染全局。

但如果你引用了第三方组件，又需要在父组件更改子组件的样式。就要用到组件穿透（也叫深度修改css）。

解决方法1：混用本地和全局样式

一个.vue文件允许多个style，你可以在一个组件中同时使用有 scoped 和非 scoped 样式：

<style>
/* 全局样式 */
</style>
 
<style scoped>
/* 本地样式 */
</style>

解决方法2：深度作用选择器 >>>

如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改

<style scoped>
  .a >>> .b { 
    color: blue
  }
</style>

/* 上述代码将会编译成： */
.a[data-v-469af010] .b { color: blue }

有些像sass/less之类的预处理器无法正确解析 >>> ，这时候需要使用 /deep/ 选择器，但是vue-cli3可能会导致变异报错。这个时候用 ::v-deep

<style lang="scss" scoped>
  .hello{
    /deep/ .el-button{
      width: 100px;
    }
  }
  .hello{
    ::v-deep .el-button{
      width: 100px;
    }
  }
</style>