详解vue样式穿透的几种方式

下面是详解 "Vue 样式穿透的几种方式" 的完整攻略。

什么是 Vue 样式穿透

Vue 样式穿透是一种方式，可以让你在组件内部使用外部样式表中定义的样式规则。常见的情况是，你想要在组件内部修改或者扩展外部的 CSS 样式。

Vue 提供了多种方式支持样式穿透，下面我们将详细介绍这些方式。

方式一：使用 /deep/ 或者 ::v-deep

如果你使用的是 Vue 2.x 版本，那么可以使用 /deep/ 或者 ::v-deep 这个语法来实现样式穿透。这个语法可以让你在组件内部选择器中使用外部定义的样式规则。

<template>
  <div class="wrapper">
    <div class="child">
      <p class="text">Hello World!</p>
    </div>
  </div>
</template>

<style>
.wrapper /deep/ .text {
  color: red;
}
</style>

方式二：使用 ::v-deep

如果你使用的是 Vue 3.x 版本，那么可以使用 ::v-deep 这个语法来实现样式穿透。Vue 3.x 中已经不再支持 /deep/ 这个语法。

<template>
  <div class="wrapper">
    <div class="child">
      <p class="text">Hello World!</p>
    </div>
  </div>
</template>

<style>
.wrapper ::v-deep .text {
  color: red;
}
</style>

方式三：使用 /deep/ deprecated

如果你使用的是 Vue 2.x 版本，并且你的组件是使用 scoped 属性来限制 CSS 样式作用范围的，那么你可以使用 /deep/ deprecated 语法。

<template>
  <div class="wrapper">
    <div class="child">
      <p class="text">Hello World!</p>
    </div>
  </div>
</template>

<style scoped>
.wrapper /deep/ .text {
  color: red;
}
</style>

示例1：

<template>
  <div class="box">
    <p class="text">Hello World!</p>
  </div>
</template>

<style scoped>
.box /deep/ .text {
  color: red;
}
</style>

示例2：

<template>
  <div class="box">
    <p class="text">Hello World!</p>
  </div>
</template>

<style>
.box ::v-deep .text {
  color: red;
}
</style>

以上就是 "Vue 样式穿透的几种方式" 的完整攻略，希望能对你有所帮助！