样式穿透应该怎么解决Vue：优先使用 scoped 和深度选择器（>>>、/deep/ 或 :deep()）

2025-02-14 97 阅读1分钟

1.Scoped CSS（Vue）

在 Vue 中，可以使用 scoped 属性将样式限制在当前组件内，避免样式穿透。

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<style scoped>
.parent {
  color: red;
}
</style>

原理

scoped 会为组件的样式添加唯一属性（如 data-v-123456），确保样式只作用于当前组件。

2. 深度选择器（Vue）

如果需要穿透 scoped 样式，修改子组件的样式，可以使用深度选择器。

<style scoped>
/* vue2中使用>>> */
.parent >>> .child {
  color: blue;
}

/* 或者使用/deep/ */
.parent /deep/ .child {
  color: blue;
}

注意事项

>>> 和 /deep/ 是 Vue 2 的语法，Vue 3 中推荐使用 :deep()。

<style scoped>
/* vue3中使用 :deep() */
.parent :deep(.child) {
  color: blue;
}
</style>

使用 `!important`（不推荐）

在极端情况下，可以使用 !important 强制覆盖样式，但不推荐滥用。