vue3 样式穿透

当我使用UI组件时候，需要在单文件里覆盖它的样式。

如果是直接子组件，可以直接改。

二代或者三代子组件， scoped 就无法做到了。

可以尝试在单文件里再加一个没有 scoped 修饰的 <style>,然后通过根元素上的类限制范围。

<div class="root">
    <Component />
</div>
<style scoped>
...
</style>
<style>
.root  .children-component {
.... # 覆盖子组件属性
}
</style>

scss 同理

::v-deep

很显然，上面的方法不是很优雅。实际上可以 ::v-deep 来解决这个问题。

.root{
 ::v-deep .children-component{
        ... # 覆盖子组件属性
    }
}

这种做法已经不推荐使用了。

.root{
    :deep(.children-component){
        ... #覆盖子组件属性
    }
}

这种写法更好，跟多内容，可以参考官网：深度选择器