样式穿透-如何修改第三方组件样式

背景

通常情况下，我们在写组件样式的时候会在加上scoped，主要是为了防止组件之间的样式被覆盖而污染，但有时候我们想要修改第三方组件样式。由于加上scoped，则无法修改其样式，但去掉scoped，则变成全局样式，给后人留了坑。那么，我们如何修改第三方组件样式呢？这里，我们就需要一种方式：样式穿透。

样式穿透

样式穿透，官方叫做深度选择器，也有人会叫穿透选择器，是一种CSS选择器，可以用来指定一个元素中的子元素或后代元素。

如何使用

deep

深度选择器的写法主要有三种：>>>、/deep/、::v-deep：、:deep()
1）>>> .icon {}
2）/deep/ .icon {}
3) ::v-deep .icon {}
4) :deep(.icon)
但这四种写法在应用场景会有所不同。

1） >>>

可应用在原生css、scss/sass、less

2）/deep/

可应用在scss/saaa、less及vue-cli3版本及以下的，vue-cli3版本以上的不可用，会编译出错。

3）::v-deep

在vue3 sass/scss中会编译出错，其他场景可适用

4）:deep()

vue3 sass/scss中可适用

参考文献：
[1]: https://www.52dianzi.com/category/article/37/534120.html
[2]: https://blog.csdn.net/weixin_39357177/article/details/114371187