vue中样式穿透的三种写法

在vue项目中，当我们使用第三方组件库时，例如（element-ui、vant）时，遇到需要修改组件中第三方组件库中的样式，但同时又不想去除scoped属性造成组件之间的样式覆盖，这时，我们就可以使用样式穿透来解决这个问题 

样式穿透的方式

1. 通过>>>穿透scoped 

<style scoped>
   外层>>>第三方组件类名{
  样式
    }
</style>

当Sass、Less之类的预处理器无法解析>>>，可以使用/deep/或者::v-deep

2. /deep/ 在less中使用

<style lang='less' scoped>
  /deep/ 第三方组件类名{
      样式
   }
</style>

3. ::v-deep 在scss中使用

<style lang='scss' scoped>
 ::v-deep 第三方组件类名{
      样式
   }
</style>

案例：

// 样式
.container {
    width: 100px;
    height: 80px;
    >>> .box {
      margin-top:15px; !important;
    }
}
// Less || Sass
.container {
    width: 100px;
    height: 80px;
    /deep/ .img {
      margin-top:15px; !important;
    }
}
.img-container {
  border-radius: 50%;
  ::v-deep img {
    width: 60px;
    height: 60px;
  }
}