cva: когда обычного сlsx уже мало

Пока у кнопки два состояния — «обычная» и «выключенная» — легко склеить классы через clsx:

<button className={clsx("btn", isDisabled && "btn-disabled")} />

Но стоит появиться трём размерам и трём цветам, как в className начинается каша из условий. cva (class-variance-authority) помогает удобно описывать варианты стилей компонента — размеры, цвета, состояния. Внутри он использует clsx, так что это не замена, а надстройка над ним.

Основная идея

cva предлагает описать все варианты один раз и в понятном виде:
- variants — какие вообще варианты есть (размер, цвет и т.д.);
- defaultVariants — что ставить, если ничего не передали;
- compoundVariants — особые классы для конкретных сочетаний;
- VariantProps — готовые типы для пропсов компонента.

В ответ получаем функцию: передали в неё варианты — получили готовую строку классов. clsx при этом никуда не делся — cva склеивает классы через него.

Пример

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

const button = cva("btn", {
  variants: {
    intent: {
      primary: "btn-primary",
      danger: "btn-danger",
    },
    size: {
      sm: "btn-sm",
      md: "btn-md",
    },
  },
  compoundVariants: [
    { intent: "primary", size: "sm", className: "btn-uppercase" },
  ],
  defaultVariants: { intent: "primary", size: "md" },
});

// выводим типы из описания вариантов
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof button>;

export function Button({ intent, size, className, ...props }: ButtonProps) {
  return <button className={button({ intent, size, className })} {...props} />;
}

Частые ошибки

- Тянуть cva туда, где хватает одного-двух условий, — обычный clsx проще и легче.
- Забыть про defaultVariants — и в каждом месте вызова вручную передавать одни и те же варианты.
- Продублировать описание вариантов в нескольких компонентах вместо одного общего.

Итог

clsx отвечает на вопрос «добавить ли этот класс?», а cva — «как устроены все варианты компонента?». Если условий одно-два, clsx вполне хватает. 👉 Как только появились размеры, цвета, дефолты и сочетания — используем cva.

#js #javascript #typescript #frontend #фронтенд #разработка #dev #webdev #react