cva（class-variance-authority）函数介绍

cva 是 class-variance-authority（简称 CVA）库中的一个函数，它用于创建可变的（可配置的）CSS 类管理器。它的作用是根据不同的 变体（variants） 和 条件（conditions） 生成相应的 CSS 类，以减少手写 className 的冗余，并提供更好的可维护性。

---

cva 的基本使用

import { cva } from "class-variance-authority";

const button = cva(
  "px-4 py-2 font-bold rounded",  // 基础样式
  {
    variants: {
      variant: {
        primary: "bg-blue-500 text-white",
        secondary: "bg-gray-500 text-white",
      },
      size: {
        sm: "text-sm",
        lg: "text-lg",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "sm",
    },
  }
);

console.log(button()); 
// "px-4 py-2 font-bold rounded bg-blue-500 text-white text-sm" (默认)

console.log(button({ variant: "secondary", size: "lg" })); 
// "px-4 py-2 font-bold rounded bg-gray-500 text-white text-lg"

---

结合 React 组件

import { cva, type VariantProps } from "class-variance-authority";

const button = cva(
  "px-4 py-2 font-bold rounded",
  {
    variants: {
      variant: {
        primary: "bg-blue-500 text-white",
        secondary: "bg-gray-500 text-white",
      },
      size: {
        sm: "text-sm",
        lg: "text-lg",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "sm",
    },
  }
);

// 获取类型
type ButtonProps = VariantProps<typeof button> & React.ButtonHTMLAttributes<HTMLButtonElement>;

const Button: React.FC<ButtonProps> = ({ variant, size, className, ...props }) => {
  return <button className={button({ variant, size, className })} {...props} />;
};

// 使用
export default function App() {
  return (
    <div className="flex gap-4">
      <Button variant="primary" size="sm">Primary Small</Button>
      <Button variant="secondary" size="lg">Secondary Large</Button>
    </div>
  );
}

---

cva 的作用总结

1. 管理 CSS 变体（variants）：避免手写 className 组合。
2. 提供默认值（defaultVariants）：避免每次都必须指定所有的变体。
3. 可以动态组合（动态拼接 className）：支持动态传入 className 进行扩展。
4. 支持 TypeScript 类型推导：配合 VariantProps 自动推导变体的类型。

适用于 Tailwind CSS 项目，让 className 变得更简洁、可维护！