Vue3深度样式修改技巧：deep穿透使用方法

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()（函数式伪类），且必须出现在