::deep 是 Vue 中 scoped 样式的一个穿透语法，它的核心作用是：强制让父组件的样式穿透子组件的根节点或内部元素，从而覆盖子组件或第三方 UI 库的样式。
作用
当给
使用场景
- 修改第三方 UI 库：直接修改 Element Plus、Vant 等库的内部样式，这些样式通常不受 scoped 影响。
- 修改子组件根节点：父组件需要调整子组件最外层容器的布局（如边距、宽度）。
- 修改子组件内部深层元素：子组件内部结构复杂，需要穿透多层选择器进行样式覆写。
使用方法
在
- 修改子组件根节点
css
/* 父组件 */
<style scoped>
/* 作用于子组件 MyComponent 的根元素 */
::deep(.child-component) {
border: 1px solid red;
}
</style>- 修改子组件内部深层元素
css
<style scoped>
/* 作用于子组件内部的 .header 元素 */
::deep(.child-component .header) {
background-color: blue;
}
</style>- 针对 UI 库动态类名
css
<style scoped>
/* 覆盖 Element Plus 的输入框样式 */
::deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #ff0000 inset;
}
</style>注意：早期 Vue 2 中使用的 /deep/ 或 >>> 已被废弃，统一使用 ::deep。如果你在使用 scss 等预处理器，写法不变。
如果项目未使用 scoped，则不需要 ::deep，直接编写全局样式即可覆盖。