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

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

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

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

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

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

Итог

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

Пример кода в обложке поста 👀

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