为什么vue:deep、/deep/、>>>样式能穿透到子组件

在使用scoped标记的style时，deep符号通常用于修改外部组件的样式。下面我们将探讨这些符号的用法及其效果。

小试牛刀

不使用deep

如果要修改三方组件的样式，通常只能将样式放在scoped之外，这会导致全局样式污染，可能引发样式冲突。

<style lang="less">
.container {
    .el-button {
        background: #777; 
    }
}
</style>

使用 /deep/ 或 >>>（已弃用）

.container1 {
    /deep/ .el-button {
        background: #000; 
    }
}

.container2 >>> .el-button {
    background: #222; 
}

在 Vue 3 中使用 /deep/ 或 >>> 时，控制台会提示警告：这两个组合符号已被弃用，建议使用:deep()替代。

使用 :deep

.container3 {
    :deep(.el-button) {
        background: #444; 
    }
}

嵌套 :deep

如果按以下方式嵌套deep，是否有效呢？

.container4 {
    :deep(.el-button) {
        :deep(.el-icon) {
            color: #f00;
        }
    }
}

源码解析

/deep/或>>>在编译时被转换为空格，从而使得选择器直接变为子样式。例如：

.no-deep .container1[data-v-f5dea59b] .el-button { background: #000; }

而:deep的处理过程则更复杂，但最终会生成类似以下的样式：

.no-deep .container3[data-v-f5dea59b] .el-button { background: #444; }

嵌套结果

以.container4 :deep(.el-button)为例，解析后可能得到：

• 最终样式为 .container4 .el-button，而对于:deep(.el-icon)，由于找不到祖先元素，结果为：

.no-deep .container4[data-v-f5dea59b] .el-button :deep(.el-icon) { color: #f00; }

这表明，deep并不支持嵌套。

结尾

如果觉得本文对你有帮助，欢迎关注我的开源项目，感谢你的支持！

• react-native-mapa
• mapboxgl-syncto-any

！