Vue.js 覆盖组件 CSS

在 Vue.js 中，我们可以使用 scoped 属性来对一个组件的样式进行限定，防止样式污染。但是有时候我们可能需要覆盖一个 scoped 样式，比如我们想要对一个第三方组件进行样式定制。该怎么办呢？

下面是几种方法：

使用 /deep/

/deep/ 是一个伪类选择器，可以让样式中的选择器穿透组件边界，从而影响到子组件中的元素。

<style scoped>
.parent /deep/ .child {
  /* 这里是你需要覆盖的样式 */
}
</style>

需要注意的是，/deep/ 最好不要随便使用，否则可能会对整个应用的渲染性能带来影响。

使用 ::v-deep

在 Vue.js 2.6.0 中，/deep/ 被废弃了，推荐使用 ::v-deep 替代它，使用方法与 /deep/ 类似。

<style scoped>
.parent ::v-deep .child {
  /* 这里是你需要覆盖的样式 */
}
</style>

使用 /deep/ 和 /deep!/

在 Vue.js 2.2.0 到 2.5.0 之间的版本中，/deep/ 不被支持，但可以使用 >>> 或者 /deep!/ 来替代。

<style scoped>
.parent >>> .child {
  /* 这里是你需要覆盖的样式 */
}

.parent /deep!/ .child {
  /* 这里是你需要覆盖的样式 */
}
</style>

使用 !important

使用 !important 可以覆盖任何已有的样式，但是在 Vue.js 中不推荐使用。

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

以上几种方法可以让你轻松地覆盖组件 CSS，但是需要注意的是，尽可能地保持样式的层级结构清晰，尽量避免使用过于复杂的选择器。