vue組件樣式穿透/deep/ ::v-deep ＞＞＞區別

轉載至

https://blog.csdn.net/qq_38323658/article/details/108748463

在寫一些vue項目時候，經常會引入一些組件。無論是自定義組件還是引入的外部組件。style標簽上都有scoped屬性。防止影響到其他頁面上的樣式。但是又是需要在父組件更改自組件的樣式。就要用到組件穿透（也叫深度修改css）。
可用的方法有 /deep/ ::v-deep >>>

>>>

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

<style scoped>
/*編譯前*/
.a >>> .b { 
 color:blue
}
.a{
 ::v-deep .b { 
  color:blue
 }
} 
.a ::v-deep .b {
 color:blue
}

/*編譯后*/
.a[data-v-fsdfg9] .b { color:blue}
</style>

/deep/

項目中用到了預處理器 scss 、sass、less 操作符 >>> 可能會因為無法編譯而報錯 。可以使用 /deep/
但是vue-cli3可能會導致變異報錯。這個時候用::v-deep

::v-deep

::v-deep在預處理器 scss 、sass、less 比較通用