Vue3深度样式修改技巧：deep穿透使用方法
2026-04-29 17:07:38
0浏览
收藏
Vue 3 中深度修改第三方组件样式不再依赖已废弃的 `::v-deep`，而需正确使用仅在 `
为什么::v-deep写法不生效？
Vue 3 默认使用 shadow-dom 风格的样式隔离（即 scoped），子组件的根元素会被自动加上类似 data-v-f3f3eg9 的属性，但第三方组件（比如 el-button、van-button）内部结构不受你项目的 scoped 影响，你的 CSS 规则根本匹配不到它的内部节点。
很多人直接写 ::v-deep .my-class 发现无效，是因为：::v-deep 是 Vue 2 的写法，Vue 3 中已被废弃；当前有效的是 :deep()（函数式伪类），且必须出现在
