如果使用了scoped后,無法修改第三方UI組件庫組件的樣式，這里可以使用css深度作用選擇器，以作樣式修改。

在Vue項目中，經常需要使用如elementUI、vant、 iview等組件庫，都可能自定義一些樣式文件，但是有些樣式直接在組件中修改無效，因為scoped局限于當前組件，去掉scoped的話又會影響全局樣式。針對這種情況，可以使用深度作用選擇器（即樣式穿透）

可以使用：

<style scoped></style>

選擇器能夠作用得“更深”，可以影響到內部子組件

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

<style scoped>
/*編譯前*/
.a >>> .b { }/*編譯后*/
.a[data-v-f3f3eg9] .b {}
</style>

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

<style lang="scss" scoped>
/*用法1*/
.a {/deep/ .b { }
} 
/*用法2*/
.a /deep/ .b { }.button-box{/deep/ .el-button{padding: 13px 50px;}}
</style>

::v-deep?在預處理器 scss 、sass、less 比較通用 如果使用了預處理器都可以使用 ::v-deep。::v-deep與 /deep/都是深度選擇器，都能實現對組件內部的樣式修改， ::v-deep的記載速度更快，在scss中使用/deep/會報loader錯誤,這時可以使用::v-deep來代替:

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

原創作者:吳小糖

創作時間：2023.11.23