Как преобразовать условные классы из clxs в cva?

Я пытаюсь преобразовать приведенный ниже код в cva..

{items.map((item, index) => {
          const isActive = item.key === SOMETHING;
          return (
            <div
              key = {index}
              className = {clsx(
                `cursor-pointer`,
                {
                  "text-white": isActive && variant === "inverted",
                  "text-stone-950": isActive && variant === "default",
                  "text-[#9b9b9b]": !isActive,
                  "hover:text-white": variant === "inverted",
                  "hover:text-stone-950": variant === "default",
                },
              )}
            >...</div>
    });

Я пробую так -

const textContentCva = cva("", {
    variants: {
      variant: {
        inverted: "hover:text-white",
        default: "hover:text-stone-950",
      },
    },
  });

Но не знаю, как передать переменную isActive.

Я могу создать вариант activeInverted, activeDefault, но это не кажется хорошим.

Может ли кто-нибудь сказать, как мне преобразовать его для использования cva?

css reactjs next.js tailwind-css

28.04.2024 07:35

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

147

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

На данный момент я понимаю, что вы пытаетесь сделать, как показано ниже:

const textContentCva = cva("", {
  variants: {
    variant: {
      inverted: "hover:text-white",
      default: "hover:text-stone-950",
    },
    state: {
      active: "",
      inactive: "text-[#9b9b9b]",
    },
  },
  compoundVariants: [
    { variant: "default", state: "active", class: "text-stone-950" },
    { variant: "inverted", state: "active", class: "text-white" },
  ],
});

{items.map((item, index) => {
  const isActive = item.key === SOMETHING;
  return (
    <div
      key = {index}
      className = {clsx(
        `cursor-pointer`,
        textContentCva({variant: variant, state: isActive ? 'active' : 'inactive' })
      )}
    >...</div>
});

28.04.2024 11:07

Ответ принят как подходящий

Вы можете использовать переменные CSS в именах классов CVA.

Мы можем рационализировать условия:

variant меняет цвет «акцента».
isActive меняет цвет неактивного текста по умолчанию #9b9b9b на цвет акцента.

В CVA вы можете иметь логическое значение варианта true, но не логическое значение false. Для условия false мы можем использовать defaultVariants для применения соответствующих классов.

const classes = cva('cursor-pointer', {
  variants: {
    variant: {
      default: '[--color:theme(colors.stone.950)]',
      inverted: '[--color:theme(colors.white)]',
    },
    isActive: {
      'default': 'text-[#9b9b9b] hover:text-[--color]',
      true: 'text-[--color]',
    },
  },
  defaultVariants: {
    variant: 'default',
    isActive: 'default',
  },
});
  

function CVAVersion({ variant, isActive }) {
  return <div className = {classes({ variant, isActive })}>...</div>;
}

function CLSXVersion({ variant, isActive }) {
  return (
    <div
      className = {clsx(
        `cursor-pointer`,
        {
          "text-white": isActive && variant === "inverted",
          "text-stone-950": isActive && variant === "default",
          "text-[#9b9b9b]": !isActive,
          "hover:text-white": variant === "inverted",
          "hover:text-stone-950": variant === "default",
        }
      )}
    >...</div>
  );
}


ReactDOM.createRoot(document.getElementById('app')).render(
  <React.Fragment>
    <CLSXVersion variant = "default"/>
    <CLSXVersion variant = "default" isActive/>
    <CVAVersion variant = "default"/>
    <CVAVersion variant = "default" isActive/>
    <div class = "bg-slate-950">
      <CLSXVersion variant = "inverted" />
      <CLSXVersion variant = "inverted" isActive />
      <CVAVersion variant = "inverted" />
      <CVAVersion variant = "inverted" isActive />
    </div>
  </React.Fragment>
);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity = "sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity = "sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://www.unpkg.com/[email protected]/dist/clsx.min.js" integrity = "sha384-dEq4EUqxSIwObxCTXRGn1G8uU8Dqce+ragCb5MYDS6s+QHC2gaYQLxHklTJLaked" crossorigin = "anonymous"></script>
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<script>window.exports = {};window.require=()=>clsx</script>
<script src = "https://www.unpkg.com/[email protected]/dist/index.js" integrity = "sha384-Ua/NUydOXqPPKWdUxsvNqN7S97GagbtZ08VsSKGzqMYr/WwqcQ6Ajsq1LYfkfOn4" crossorigin = "anonymous"></script>
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>

<div id = "app"></div>

28.04.2024 11:26

Другие вопросы по теме

InfiniteScroll продолжает извлекать данные до тех пор, пока не будет превышена максимальная глубина обновления

Живой сервер в VS Code, показывающий каталог листинга вместо приложения React

Элемент React с параметрами HTML, которые не отображаются

У меня возникла проблема с компонентом карусели материала-попутного ветра

Переходы CSS не работают с объектами React MUI

React дизайн списка с состоянием, где каждый элемент зависит от предыдущего

Как разместить корневой div с помощью рендерера React?

Пользовательская окраска компонентов с помощью Tailwind в React

Как запустить модульное тестирование в приложении Create React, которое импортирует файл tsx

Генерируйте темные цвета только в React и JS

Как преобразовать условные классы из clxs в cva?

Ответы 2

Другие вопросы по теме

Похожие вопросы