最近有人问我如何在Vue组件中创建样式变体，虽然这看起来是一个简单的问题，但我深入探讨后发现有多种方法可以实现。在本文中，我将介绍四种常见的实现方式，这不应该被视为完整的列表，而是一个很好的起点。

目录

1. Props + :class

2. 动态样式 (v-bind() + 响应式数据)

3. CSS Modules

4. 通过Props的CSS变量

1. Props + :class

Button.vue

<template>
  <button :class="['base-button', variantClass]">
    <slot />
  </button>
</template>

<script setup lang="ts">
import { computed } from "vue";

type Variant = 'primary' | 'secondary' | 'error'

const props = defineProps<{
  variant?: Variant
}>()

const variantClass = computed(() => `button-${props.variant ?? 'primary'}`)
</script>

<style scoped>
.base-button {
  padding: 1rem;
  border: none;
  margin-bottom: 1rem;
}

.button-primary {
  background-color: blue;
  color: white;
}

.button-secondary {
  background-color: gray;
  color: black;
}

.button-error {
  background-color: red;
  color: white;
}
</style>

在这个例子中，我们通过传递variant属性到绑定的class来创建这个简单的按钮组件。传递的属性字符串通过组件内部的computed属性来构建CSS类名。

Example.vue

这里是一个演示如何将variant属性传递给组件的例子：

<script setup lang="ts">
import Button from "./components/Button.vue"
</script>

<template>
  <div class="variant-example">
    <h2>Props + :class</h2>
    <p>使用props通过计算类来确定按钮样式。</p>

    <!-- 没有传递variant，作为默认值我们将应用primary样式 -->
    <Button>Primary变体</Button>

    <!-- 传递'secondary'变体 -->
    <Button variant='secondary'>Secondary变体</Button>

    <!-- 传递'error'变体 -->
    <Button variant='error'>Error变体</Button>
  </div>
</template>

使用TypeScript在这个例子中，我们可以确保这个组件的用户只能使用三种可能的变体：primary、secondary、error，任何不匹配这些的字符串都会向开发者抛出TS错误。

优点

简单性

o 非常容易理解和实现

o 适合初学者和中小型项目

清晰的API

o Props使组件的API变得明确：
<BaseButton variant="primary" />

灵活性

o 你可以有条件地组合多个类，甚至根据需要切换类和内联样式：
:class="[baseClass, variantClass, { disabled: isDisabled }]"

作用域样式工作良好

o 与<style scoped>无缝协作，因为你在组件级别控制类名

无需构建步骤或外部设置

o 与CSS Modules或工具框架不同，不需要额外的工具或配置

缺点

可能变得冗长

o 随着变体数量的增长（例如，大小、颜色、状态、类型），模板或计算属性中的逻辑可能变得混乱：
:class="['btn', sizeClass, colorClass, { 'btn-disabled': disabled }]"

不太可扩展

o 手动管理许多变体组合变得难以维护

o 没有像CSS Modules提供的命名空间或封装

难以在项目间重用

o 样式与组件自己CSS中定义的类名紧密耦合

o 你需要移植逻辑和样式

容易出现不一致

o 如果类名拼写错误或与定义的样式不对齐，你不会得到编译时错误（特别是在没有TypeScript + CSS Module支持的情况下）

类型安全有限

o 作为props传递的变体不是强类型的，除非你明确定义类型/枚举。像variant="primray"这样的错误不会被捕获，除非你手动防范它们

2. 动态样式 (v-bind() + 响应式数据)

Button.vue

<template>
  <button class="base-button" @click="onButtonClick">
    <slot />
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  bgColor?: string;
}>();

const dynamicColor = ref<string>(props.bgColor || 'purple');

const onButtonClick = () => {
  dynamicColor.value = dynamicColor.value !== 'orange' ? 'orange' : props.bgColor || 'purple';
}
</script>

<style scoped>
.base-button {
  padding: 1rem;
  border: none;
  margin-bottom: 1rem;
  background-color: v-bind(dynamicColor);
}
</style>

这个例子是Vue 3特有的。在这个例子中，我们不是传递variant属性，而是传递特定的样式属性，在这种情况下是bgColor。使用v-bind，我们能够将传递的属性应用到我们的CSS中作为background-color的响应式属性。在这个例子中，点击按钮将在紫色和橙色之间交替背景。这个例子还允许通过props传入自定义的bgColor。

Example.vue

<script setup lang="ts">
import Button from "./components/Button.vue"
</script>

<template>
  <div class="variant-example">
    <h2>动态样式 (v-bind() + 响应式数据)</h2>
    <p>使用响应式状态动态改变样式。</p>
    <Button>点击改变背景颜色</Button>

    <!-- 这个例子允许自定义蓝色
    <Button bgColor="blue">点击改变背景颜色</Button>
  </div>
</template>

优点

作用域样式的封装

o 你保持样式逻辑接近组件，一切都是自包含的

o 有助于避免样式全局泄漏

消费者的清洁API

o 消费者可以传递一个prop（bgColor）来自定义初始样式，而无需触及内部逻辑

运行时交互性

o 启用交互式样式更改（如颜色切换），无需触及CSS类或在模板中使用:style绑定

声明式和可读

o 保持模板简单（无内联样式），并干净地分离逻辑和样式

缺点

浏览器支持和工具限制

o CSS中的v-bind()相对较新（自Vue 3.2+支持），并非所有CSS工具或浏览器开发工具都支持

o 样式块中的自动完成、linting和类型检查可能无法可靠工作

缺乏细粒度控制

o 你不能像使用内联样式或计算类绑定那样轻松应用条件逻辑（如回退样式、过渡或多个props）

调试更困难

o 在浏览器开发工具中检查动态绑定样式比常规基于类或内联样式更困难

响应式注意事项

o 虽然v-bind()是响应式的，但如果你没有正确绑定到响应式源（如未被监听的prop），更改可能不会触发重新渲染

更难测试或覆盖

o <style scoped>中的动态样式通过父样式或媒体查询覆盖的灵活性较低

3. CSS Modules

Button.vue

<template>
  <button :class="[styles['base-button'], styles[`button-${variant}`]]">
    <slot />
  </button>
</template>

<script setup lang="ts">
defineProps<{
  variant: string
}>();
import styles from './ButtonCSSModules.module.css'
</script>

Button.modules.css

.base-button {
  padding: 1rem;
  border: none;
  margin-bottom: 1rem;
}

.button-primary {
  background-color: blue;
  color: white;
}

.button-secondary {
  background-color: gray;
  color: black;
}

.button-danger {
    background-color: red;
    color: white;
}

在这个例子中，我们利用CSS modules来确定variant。如果你想要对组件样式进行更细粒度的控制，并且不严重依赖全局设计系统或像Tailwind这样的工具框架，这可以使用。

Example.vue

<script setup lang="ts">
import Button from "./components/Button.vue"
</script>

<template>
  <h2>CSS Modules</h2>
    <p>使用CSS Modules进行作用域样式。</p>
    <Button variant="primary">Primary变体</Button>
    <Button variant="secondary">Secondary变体</Button>
    <Button variant="danger">Danger变体</Button>
</template>

优点

默认作用域样式

o CSS Modules自动将类名本地作用域，避免命名冲突，特别有助于大型应用或设计系统

静态分析和类型安全（使用工具）

o 当与TypeScript和像typed-css-modules这样的工具一起使用时，你可以获得类名的自动完成和类型检查

变体的显式映射

o 语法styles[button-${variant}]使得将样式变体映射到variant prop变得容易，保持逻辑接近模板

更清晰的关注点分离

o 将样式逻辑保留在CSS中而不是内联在JS/TS中。这对于有专门设计师或CSS工程师的团队可能更易维护

可预测和可维护

o 你可以在CSS文件中明确定义所有变体（.button-primary, .button-secondary等），使审计样式更容易

缺点

动态样式有限

o 你不能基于运行时条件动态更改样式，除了类名切换。你仅限于预定义的类名

冗长和间接

o 语法styles[button-${variant}]比使用普通类字符串或像Tailwind这样的工具优先CSS可读性较差

组件间共享逻辑更困难

o 如果多个组件需要类似的样式变体，你可能最终在文件间复制类逻辑或手动导入相同的CSS模块

无主题感知（开箱即用）

o CSS Modules不原生支持主题、暗模式或设计令牌，除非你引入额外工具（如CSS变量或PostCSS插件）

设计系统灵活性较低

o 与工具优先或内联样式系统（如Tailwind、Emotion或:style绑定）相比，CSS Modules对于高度动态或基于令牌的设计系统更僵化

4. 通过Props的CSS变量

Button.vue

<template>
  <button class="button" :style="buttonStyle">
    <slot />
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  bgColor?: string;
  color?: string;
}>()

const buttonStyle = computed(() => ({
  '--bg-color': props.bgColor || 'white',
  '--color': props.color || 'black',
}))
</script>

<style scoped>
.button {
  padding: 1rem;
  color: var(--color);
  border: none;
  margin-bottom: 1rem;
  background-color: var(--bg-color);
}
</style>

这个例子类似于例子#2，除了在这个实例中CSS变量绑定到按钮的style属性。这向CSS中的style标签暴露变量，允许按钮具有自定义的color和background-color值。与例子#2不同，我们没有绑定值，所以动态更改它们不会那么直接。

Example.vue

<script setup lang="ts">
import Button from "./components/Button.vue"
</script>

<template>
  <div class="variant-example">
    <h2>通过Props的CSS变量</h2>
    <p>使用响应式状态动态改变样式。</p>
    <Button bgColor="lightblue">浅蓝色背景</Button>
    <Button bgColor="lightgreen">浅绿色背景</Button>
    <Button bgColor="lightcoral">浅珊瑚色背景</Button>
  </div>
</template>

优点

CSS分离的动态样式

o Props驱动样式，而不在样式块中硬编码样式

o 将视觉设计集中在CSS中而不是内联样式中

更容易主题化

o CSS变量（--bg-color、--color）可以轻松覆盖或扩展以进行主题化（例如暗模式）

作用域和封装

o 样式保持封装在组件中（<style scoped>），变量不会全局泄漏

清洁的组件API

o 组件的消费者不需要了解CSS内部，只需传递像bgColor="blue"这样的props

比完全内联样式更好的性能

o 只有变量值改变，而不是整个样式块。这对渲染可能更高效

扩展性好

• o 随着需要更多样式变体，你可以扩展CSS以包含回退或多个CSS变量，而不会使逻辑混乱

缺点

CSS功能支持有限

o CSS变量不能在某些地方使用（例如媒体查询、伪元素如::before，除非在更高作用域声明）

调试更困难

o 调试样式可能更棘手，因为计算的样式依赖于运行时JS生成的变量

可能变得隐式

o 如果通过props控制太多变量，可能很难知道哪个prop控制哪个CSS规则，而不检查模板和样式部分

不适合所有用例

o 当样式依赖于需要多个更改或逻辑的条件时（例如响应式布局变化、动态单位如%、vw等），效果不佳

轻微运行时开销

o 计算的样式是响应式的，当props改变时重新计算，通常不是问题，但不如基于类的方法静态

总结

所以你有四种在Vue中实现样式变体的方法。你使用哪种方法将取决于你的情况，无论是小型独立应用程序，还是使用设计系统的大型应用程序，被许多团队使用。

每种方法都有其优缺点：

o Props + :class：最简单，适合初学者

o 动态样式：适合需要运行时交互的场景

o CSS Modules：适合大型项目和设计系统

o CSS变量：适合需要主题化和动态样式的场景

选择最适合你项目需求的方法，并考虑团队的技术栈和项目规模。