博客

问题

在很多项目中，引用了第三方组件，其样式不是自己所需要的，需要在组件中局部修改第三方组件的样式，而这个组件又设置了scroped属性来防止组件间的样式污染。因为 data-v-hash 只加在子组件的第一层，子组件中其他dom是没有 data-v-hash 这个属性的，而写在scoped中的样式都会被postcss 添加[data-v-hash],样式只作用于有data-v-009这个属性的dom无论你权值多高，甚至添加!important，都无法修改子组件中样式的

解决

1.

>>>


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

<style scoped>
/*编译前*/
.a >>> .b { 
 /* ... */
}

/*编译后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>

2. /deep/

项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/

注意：vue-cli3以上版本不可以

<style lang="scss" scoped>
/*用法1*/
.a {
 /deep/ .b { 
  /* ... */
 }
} 
/*用法2*/
.a /deep/ .b { 
  /* ... */
 }
</style>

3. ::v-deep
   
   如果使用了预处理器都可以使用 ::v-deep

<style lang="scss" scoped>
/*用法1*/
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
/*用法2*/
.a ::v-deep .b {
  /* ... */
}
</style>