Vue3 中 scoped css deep 该如何正确使用？

在 Vue3 的开发过程中，很多开发者会遇到样式作用域的问题，而 `scoped css deep` 就是解决这类问题的一个重要手段，我们就以问答的形式详细探讨 Vue3 中 `scoped css deep` 该如何正确使用。

什么是 scoped css？

scoped css 是 Vue 提供的一种机制，当在 <style> 标签上添加 scoped 属性时，该样式只会应用到当前组件的元素上，这就意味着，组件中的样式不会影响到其他组件，有效地避免了全局样式冲突，我们有一个简单的 Vue3 组件：

<template>
  <div class="container">
    <p class="text">这是组件内的文本</p>
  </div>
</template>
<style scoped>
.container {
  background-color: lightblue;
}
.text {
  color: red;
}
</style>

在这个例子中,.container 和 .text 的样式只会作用于当前组件内的相关元素，不会对其他组件产生影响。

为什么需要 scoped css deep？

虽然 scoped css 能很好地隔离组件样式，但有时我们希望样式能够穿透到子组件内部元素上，我们在父组件中引入了一个第三方的 UI 组件库，想要对其中的某个子元素进行样式定制，由于第三方组件库的样式结构是独立的，默认情况下，父组件的 scoped 样式无法直接影响到子组件内部元素，这时，就需要 scoped css deep 来实现样式的穿透。

Vue3 中 scoped css deep 的语法是怎样的？

在 Vue3 中，scoped css deep 有两种常用语法，一种是使用 /deep/ 操作符（在某些情况下可能会被弃用，不推荐长期使用），另一种是使用 :deep() 伪类。 假设我们有一个父组件和一个子组件，子组件中有一个按钮，我们想在父组件中修改子组件按钮的样式： 使用 /deep/ 操作符（不推荐长期使用）：

<template>
  <ChildComponent />
</template>
<style scoped>
/deep/.child - button {
  background - color: green;
}
</style>

使用 :deep() 伪类：

<template>
  <ChildComponent />
</template>
<style scoped>
:deep(.child - button) {
  background - color: green;
}
</style>

这里的 .child - button 是子组件中按钮的类名，通过 :deep() 伪类，父组件的样式就可以穿透到子组件内部作用于相应的元素。

使用 scoped css deep 有什么注意事项？

由于 /deep/ 操作符在某些场景下可能会被弃用，所以尽量使用 :deep() 伪类，过度使用 scoped css deep 可能会破坏组件的样式封装性，导致代码维护成本增加，因为一旦使用了 scoped css deep，父组件就可以随意修改子组件内部元素的样式，这可能会使得子组件的样式变得不可预测，在使用 scoped css deep 时，要注意选择器的优先级，如果子组件内部已经有相同权重的样式定义，可能会导致父组件通过 scoped css deep 设置的样式无法生效。 子组件样式：

<template>
  <button class="child - button">子组件按钮</button>
</template>
<style scoped>
.child - button {
  background - color: blue;
}
</style>

父组件样式：

<template>
  <ChildComponent />
</template>
<style scoped>
:deep(.child - button) {
  background - color: green;
}
</style>

在这种情况下,如果子组件的样式权重和父组件通过 :deep() 设置的样式权重相同，子组件自身的样式会生效，因为子组件的样式在加载顺序上更靠后，要解决这个问题，可以适当提高父组件样式选择器的权重，

<template>
  <ChildComponent />
</template>
<style scoped>
:deep(.parent - class.child - button) {
  background - color: green;
}
</style>

这里给父组件添加了一个 .parent - class 类，提高了选择器的权重，从而使父组件通过 scoped css deep 设置的样式生效。

如何在实际项目中合理应用 scoped css deep？

在实际项目中,当我们需要对引入的第三方组件库进行定制化样式时，可以优先考虑使用 scoped css deep，但要遵循最小化侵入的原则，尽量只对必要的元素进行样式修改，并且做好注释，方便后续维护，对于一个 UI 框架中的弹窗组件，我们只需要修改弹窗标题的颜色，就可以这样做：

<template>
  <ui - dialog>
    <template #title>
      <span class="dialog - title">自定义标题</span>
    </template>
    <template #default>
      <p>弹窗内容</p>
    </template>
  </ui - dialog>
</template>
<style scoped>
:deep(.ui - dialog__title.dialog - title) {
  color: orange;
}
</style>

这样既实现了对第三方组件库特定元素的样式定制,又不会过度影响组件的原有样式结构，要注意在团队开发中，对 scoped css deep 的使用进行规范，避免不同开发者随意使用导致样式混乱，可以制定相关的代码规范文档，明确在哪些情况下可以使用 scoped css deep，以及如何正确使用。

在 Vue3 开发中，scoped css deep 是一个强大的工具，能够帮助我们在保持组件样式隔离的同时，实现对特定子组件元素的样式定制，但我们需要正确理解和使用它，遵循最佳实践，以确保项目的样式代码具有良好的可维护性和可扩展性。