如何让css只在当前组件生效

在 Vue 中，可以使用以下几种方式让 CSS 只在当前组件中生效：

1. 使用作用域 CSS：在组件的样式块中，可以通过添加 `scoped` 属性来实现样式的作用域。例如：

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style scoped>
.my-component {
  /* 组件样式 */
}
</style>

使用 `scoped` 属性后，样式只会作用于当前组件内部的元素，不会影响其他组件或全局样式。

2. 使用唯一的 class 名称：给组件中的元素添加一个唯一的 class 名称，避免与其他组件或全局样式冲突。例如：

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style>
.my-component {
  /* 组件样式 */
}
</style>

通过给组件的根元素添加一个唯一的 class 名称，可以确保样式只会作用于当前组件内部。

3. 使用 CSS Modules：Vue 支持使用 CSS Modules 来实现组件级别的样式隔离。在使用 CSS Modules 时，需要将样式文件的扩展名改为 `.module.css` 或 `.module.scss`，然后在组件中引入样式，并使用生成的唯一类名。例如：

<template>
  <div :class="$style.myComponent">
    <!-- 组件内容 -->
  </div>
</template>

<style module>
.myComponent {
  /* 组件样式 */
}
</style>

在这种方式下，Vue 会自动生成对应的唯一类名，确保样式只在当前组件中生效。

以上是几种常用的方法来让 CSS 只在当前组件中生效，根据实际情况选择适合的方式来实现样式的隔离。