Vue单文件组件中必须用deep穿透样式的情况包括：修改el-input边框色、调整el-table列对齐、覆盖子组件内部class及控制子组件根元素下.content；推荐Vue3用:deep()，旧版兼容::v-deep或/deep/，需前置父选择器且不可嵌套。
在 Vue 单文件组件中，使用 deep 穿透语法是为了让父组件的 scoped 样式能影响子组件（包括第三方组件）内部的元素。核心在于绕过 Vue 为 scoped 添加的 data-v-xxxx 属性隔离机制。
什么时候必须用 deep？
当以下情况出现时，普通 scoped 样式会失效，就需要穿透：
- 想修改
<el-input></el-input>里输入框的边框颜色 - 调整
<el-table></el-table>某列文字对齐方式 - 覆盖子组件模板中带
.icon、.header这类内部 class 的样式 - 父组件加了
class="my-card"，但希望它同时控制子组件根元素下的.content
三种写法及推荐用法
Vue 官方在 Vue 3 中统一推荐 :deep()，但实际项目中仍需兼顾兼容性：
-
✅ Vue 3 推荐（Vite / Vue CLI 5+）：
:deep(.el-button__inner) { font-size: 14px; } -
⚠️ 兼容旧构建工具（如老版 Vue CLI）：
::v-deep .el-button__inner { ... }或/deep/ .el-button__inner { ... } -
❌ 不再推荐：
>>>（CSS 预处理器不总支持，且易被误解析为后代选择器）
注意：:deep() 只能用在 <style scoped></style> 内，且必须包裹在合法选择器结构中，不能单独写。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
正确写法示例（含常见坑）
假设父组件引入了 Element Plus 的按钮，并想改其内部文字大小和 hover 背景：
<style scoped>
.my-btn :deep(.el-button__inner) {
font-size: 16px;
}
.my-btn :deep(.el-button--primary:hover) {
background-color: #409eff;
}
</style>
关键细节：
- 前面要有父级选择器（如
.my-btn），否则:deep()会失去作用域上下文 -
:deep()后面跟的是子组件内部的真实 class 名，不是你传给它的 prop class - 不要嵌套多层
:deep()，比如:deep(:deep(.x))是无效的；如需穿透多层，用空格连接即可：:deep(.child) :deep(.grandchild)
替代方案与注意事项
如果 deep 仍不生效，可能是以下原因：
- 子组件本身也用了
scoped，且目标元素是子组件的根节点 —— 此时需用:deep(> .xxx)或配合:slotted()（针对插槽内容） - 样式被更具体的选择器覆盖 —— 打开浏览器开发者工具，看是否被
.el-button.el-button--primary[data-v-xxx]类型规则压制，可适当提高权重（如加!important，但慎用） - 使用了 CSS-in-JS 或主题变量方案（如 Element Plus 的
el-config-provider）—— 优先走官方主题定制，而非 deep 穿透
