Vue 样式穿透

我们都知道在 Vue 中的打包逻辑中 style 标签增加一个 scoped 标识后。样式文件只针对当前文件起作用，所以就能实现样式隔离，就可以做到防止样式污染的效果。但是，某些情况，我们必须需要外部更改内部的部分样式，咋办呢，这里就用到了样式穿透

当然我今天不是来说样式穿透的解决办法，百度能找到很多

Vue2 中 >>> /deep/ ::v-deep

Vue3 中 :deep()

以上就是解决样式穿透的的方法，当然也要区分 less 和 scss 的写法

而我需求遇到了一种不规范导致的 Bug

我有一个公共组件 Table 里面包含 Table 和 Pagination 因为在 Vue3 中 template 中可以不使用根标签为唯一标签，所以我就没使用，全部撒在里面，所以我样式穿透就完全不生效

在遭受重击很久之后，最后尝试加了根标签才解决了问题。

也算是找到了问题关键点，记一个笔记吧