scss样式穿透elementUI

修改子组件样式也要加 :deep() 告诉 Vue "穿透"样式作用域，影响子组件的内部元素

 不需要使用 deep 是因为 .page-tab-box 和其子元素都处在当前组件的作用域内，Vue的scoped样式机制已经确保了样式只作用于当前组件，不会影响到其他组件。只有在需要穿透到子组件内部或修改第三方组件样式时才需要使用 deep。

只要样式写在 scoped 里，且你要改的是「子组件 / 第三方组件内部 DOM」——就必须用 :deep / ::v-deep

二、为什么会有 :deep / ::v-deep？

Vue scoped 样式本质

 

<style scoped> .value { color: red } </style>

会被编译成：

 

.value[data-v-xxxx] { color: red }

👉 只能作用到当前组件自己的 DOM

 

但 Element / Element Plus 是「子组件」

 

<el-table> <el-input /> </el-table>

这些 DOM：

• .el-table__cell

• .cell

• .el-input__inner

👉 没有你的 data-v-xxxx

所以：

 

.el-input__inner { ... } // ❌ scoped 下必失效

 

什么时候「必须」用 :deep / ::v-deep？

场景 1：改 Element / Antd / 第三方组件内部样式（自己传入组件的类名也需要deep，因为不是直接赋值所以也未编译）

你这个例子就是典型：

:deep(.el-table .current-row td.el-table__cell .cell .el-input__inner) {
  background: #f0f7ff;
}

 

✔ .current-row
✔ .el-table__cell
✔ .el-input__inner

👉 全部都在 子组件内部

✅ 场景 2：scoped 样式里，想影响 slot 内容

<MyComp>
  <div class="inner" />
</MyComp>

/* scoped */
:deep(.inner) {
  color: red;
}

✅ 场景 3：el-table 行高亮 / 选中态样式

:deep(.el-table .current-row) {
  background-color: #e6f7ff;
}

四、什么时候「不该」用 :deep？

❌ 场景 1：样式写在全局 <style>（非 scoped）

❌ 场景 2：你改的是当前组件自己的 DOM

❌ 场景 3：你想“偷懒”绕 scoped

 

五、:deep vs ::v-deep 怎么选？

Vue 3（推荐）

:deep(.el-input__inner) {}

Vue 2 / 兼容写法

::v-deep .el-input__inner {}

📌 本质是同一个东西
📌 :deep() 是新语法

 

方式1：

:deep(.current-row td.el-table__cell .cell .el-input__inner) {
  color: #262c38;
}

scss推荐写法1:

.el-table {
  :deep(.current-row) {
    td.el-table__cell {
      .cell {
        .el-input__inner {
          height: 22px;
        }
      }
    }
  }
}

SCSS 会编译成：

.el-table :deep(.current-row) td.el-table__cell .cell .el-input__inner {
  height: 22px;
}

scss推荐写法2:

.el-table {
  :deep(.current-row .el-input__inner) {
    height: 22px;
  }
}

最终编译结果

.el-table[data-v-xxxxxx] .current-row .el-input__inner {
  height: 22px;
}

方式2（可以多层嵌套）

.aaa {
  ::v-deep .el-table__row {
    cursor: pointer;

    .el-input__inner {
      height: 100%;
    }
  }
}

编译结果：

.aaa[data-v-xxxx] .el-table__row {
  cursor: pointer;
}

.aaa[data-v-xxxx] .el-table__row .el-input__inner {
  height: 100%;
}