vue3 `:deep` 和 `:global` 使用以修改子组件样式或者全局样式

在Vue 3中，尤其是当你使用的是单文件组件（SFC）和CSS预处理器（如SCSS或LESS）时，:deep 和 :global 伪类选择器可以帮助你更灵活地控制样式的作用范围。这些选择器主要用于处理组件的样式隔离问题，尤其是在使用了影子DOM或scoped CSS的情况下。

使用:deep

:deep 伪类选择器用于在使用scoped样式时，穿透到子组件内部的元素进行样式修改。它允许你在父组件中定义影响子组件样式的规则，而不必直接在子组件中修改样式。

示例

假设有一个父组件Parent.vue和一个子组件Child.vue，你希望在Parent.vue中改变Child.vue内某些元素的样式。

Parent.vue

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

<script setup>
import Child from './Child.vue';
</script>

<style scoped>
.parent :deep(.child-class) {
  color: red;
}
</style>

在这个例子中，.child-class 是子组件Child.vue内的某个类名，通过:deep，我们可以在父组件中改变这个类名对应的样式。

使用:global

:global 伪类选择器用于指定某些样式应该全局生效，而不是被限制在当前组件的样式作用域内。这对于需要覆盖库组件样式或者应用一些全局样式非常有用。

示例

如果你想要为整个应用程序中的所有按钮设置一个默认样式，而不仅仅是当前组件内的按钮，你可以使用:global。

App.vue 或任意组件

<template>
  <div id="app">
    <button class="global-btn">点击我</button>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
:global(.global-btn) {
  background-color: blue;
  color: white;
}
</style>

在这个例子中，.global-btn 类将会全局生效，无论在哪里使用这个类名，都会应用这里定义的样式。

结合使用

有时候，你可能需要结合:deep和:global来实现更加复杂的样式控制。例如，你可能想对一个特定的第三方组件的一部分进行全局样式调整。

示例

假设你正在使用Element Plus的Button组件，并希望更改其内部图标的颜色。

<template>
  <el-button class="custom-button">
    按钮
  </el-button>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.custom-button :deep(.el-icon) {
  color: green;
}
</style>

这里，:deep用于穿透到El Button组件内部，而.el-icon是Button组件内部使用的图标类名。

总结

• :deep: 用于在使用scoped样式时，穿透到子组件内部的元素进行样式修改。
• :global: 用于指定某些样式应该全局生效，不受限于当前组件的样式作用域。

正确使用:deep和:global可以让你更灵活地管理Vue组件的样式，同时保持代码的整洁和可维护性。