Vue3 关于scss预编译中:deep 其中的deep如何理解

作者：System 时间：2024年08月15日分类：所有,css 字数：673

在Vue 3中，当你想要在组件内部深度选择一个嵌套组件的CSS样式时，你可以使用:deep选择器。:deep选择器允许你穿透组件边界，选择并修改子组件的样式。

:deep选择器的使用方法如下：




/* 在父组件的style标签中 */
:deep(.child-component-selector) {
  /* 样式规则 */
}

这里.child-component-selector是子组件的一个选择器，:deep(.child-component-selector)选择器会选中子组件内所有匹配.child-component-selector的元素，并应用里面的样式规则。

举个例子，如果你有一个子组件<BaseButton>，并且想要在父组件中覆盖其样式：




<template>
  <BaseButton class="my-button" />
</template>
 
<style>
:deep(.base-button) {
  color: red;
}
</style>

在这个例子中，:deep(.base-button)选择器会选中<BaseButton>组件内所有.base-button的元素，并将文字颜色设置为红色。

请注意，:deep选择器在单文件组件（.vue文件）的<style>标签中使用，并且它只能用于单个组件的样式中，不能在全局样式文件中使用。