vue 3 第二十六章：样式（scoped、深度选择器、全局选择器、css modules、自定义注入名称、css中v-bind）

本文介绍: 在 Vue 中，我们可以使用 scoped 特性来给组件的样式添加作用域。通过为组件的标签添加 scoped 特性，我们可以确保组件的样式仅应用于该组件的模板中，而不会影响其他组件或全局样式。

在 Vue 中，我们可以使用 scoped 特性来给组件的样式添加作用域。通过为组件的 <style> 标签添加 scoped 特性，我们可以确保组件的样式仅应用于该组件的模板中，而不会影响其他组件或全局样式。

&lt;template&gt;
  <div class="example"&gt;
    <h1&gt;Scoped Styles</h1&gt;
  </div&gt;
</template&gt;

<style scoped&gt;
.example {
  color: red;
}
</style&gt;

在上面的例子中，.example 类的样式只会应用于该组件的模板中，而不会影响其他组件或全局样式。

我们用vue 开发过程中，总是会用到各种组件库，如：Elm entUI/andt design等等，或者我们自己封装的组件，这些组件库提供的组件样式有时并不满足实际需求，这时候就需要使用深度选择器来修改样式。

下面是一个使用深度选择器的例子：
在这里插入图片描述
此时我们在自己的组件中修改 btn 组件的样式，发现并没有效果：

vue提供了:deep()选择器：

<template&gt;
  <div class="example">
    <btn>Scoped Styles</btn>
  </div>
</template>

<style lang="scss" scoped>
.example {
  :deep(.content) {
    color: red;
  }
}
</style>

在这里插入图片描述
当然了在 sass 中我们还可以使用 ::v–deep (在 less 中使用 /deep/ )来修改样式，也是可以实现的。

默认情况下，作用域样式不会影响到<slot/>渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted伪类以明确地将插槽内容作为选择器的目标：
在这里插入图片描述
渲染效果如下：

<template>
  <div class="example">
    <button class="content">
      <slot></slot>
      <slot name="title"></slot>
    </button>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
/* 直接修改插槽元素的样式，不生效 */
.example {
   .unname-class {
     color: red;
   }
}

/* 使用:slotted()插槽选择器可以修改插槽内元素的样式 */
.example {
  :slotted(.unname-class) {
    color: red;
  }
  :slotted(.name-class) {
    color: orange;
  }
}
</style>

</style>

在实际开发中我们可能会封装比较多的公共样式文件，但在某个组件中我们想去修改某个公共样式，那这个时候比起另外创建一个<style></style>标签来说，更推荐使用:global()选择器：

<style scoped lang="scss">
:global(.global-color) {
  color: red;
}
</style>

<style>
// ......
</style>

<style scoped lang="scss">
// ......
</style>

<template>
  <div class="example">
    <header :class="$style.header">头部</header>
    <main :class="$style.main">内容</main>
    <footer :class="$style.footer">底部</footer>
  </div>
</template>

<style module lang="scss">
.header,
.main,
.footer {
  height: 100px;
  width: 500px;
  border: 1px solid #000;
  font-size: 18px;
  font-weight: bold;
}
.header {
  margin-bottom: 20px;
  color: palevioletred;
}
.main {
  margin-bottom: 20px;
  color: green;
}
.footer {
  color: blue;
}
</style>

<template>
  <div class="example">
    <header :class="myStyle.header">头部</header>
    <main :class="myStyle.main">内容</main>
    <footer :class="myStyle.footer">底部</footer>
  </div>
</template>

<style module="myStyle" lang="scss">
.header,
.main,
.footer {
  height: 100px;
  width: 500px;
  border: 1px solid #000;
  font-size: 18px;
  font-weight: bold;
}
.header {
  margin-bottom: 20px;
  color: palevioletred;
}
.main {
  margin-bottom: 20px;
  color: green;
}
.footer {
  color: blue;
}
</style>

<template>
  <div class="example">
    <div class="example-text">css中v-bind绑定变量</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const color = ref("red");
</script>

<style scoped lang="scss">
.example-text {
  color: v-bind(color);
}
</style>