在 Vue 中实现样式穿透

Vue.js 中使用 scoped 属性来限制样式只作用于当前组件的元素。但有时候我们需要修改子组件或第三方库组件中的样式，这时候就需要用到“样式穿透”。

1. 深度选择器（::v-deep）

Vue 提供了 ::v-deep 伪元素，用于样式穿透。

<template>
  <div class="parent">
    <child-component />
  </div>
</template>

<style scoped>
/* 通过 v-deep 修改 child-component 内部的样式 */
.parent ::v-deep .child-element {
  color: red;
}
</style>

2. >>> 和 /deep/ （已废弃）

在 Vue 2.x 中，>>> 和 /deep/ 是样式穿透的语法，它们已经被废弃，推荐使用 ::v-deep。

<style scoped>
/* 旧写法，不推荐使用 */
.parent >>> .child-element {
  color: red;
}

/* 或者 */
.parent /deep/ .child-element {
  color: red;
}
</style>

3. !important

有时为了确保样式应用优先级，你可能需要在样式中加上 !important。例如：

<template>
  <el-button class="custom-button">Button</el-button>
</template>

<style scoped>
/* 强制覆盖 Element UI 中 button 的样式 */
::v-deep .el-button.custom-button {
  background-color: red !important;
}
</style>

4. 通过全局样式覆盖

如果样式穿透不能满足需求，或者样式需要全局应用，可以通过修改全局样式文件来覆盖子组件的样式。

5. 修改子组件内部样式

在一些场景下，如果你有权修改子组件，最好的方式是直接在子组件中提供修改样式的能力，或者使用 props、class 来传递自定义样式。

什么时候使用样式穿透？

• 修改第三方库的样式，例如 Element UI、Vant 等。
• 组件嵌套较深，某些样式需要定制。
• 父子组件样式之间存在特殊的依赖关系。

总结

“样式穿透”是一个有用的技巧，可以帮助你在 Vue 组件中更灵活地定制样式。但在使用时要注意其维护性和可读性，确保代码仍然易于理解和修改。