What is the process for transforming conditional classes from clxs to cva format?

Question

What is the process for transforming conditional classes from clxs to cva format?

Looking for a way to convert the code snippet below into cva format...

{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>
    });

I have attempted the following approach -

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

However, I am unsure how to include the isActive variable.

Creating separate activeInverted and activeDefault variants doesn't seem optimal.

Can someone provide guidance on how to properly convert this code using cva?

css reactjs next.js tailwind-css

Answer 1

Answer №1

Utilizing CSS variables in CVA class names is a great way to customize your styling.

The conditions can be rationalized as follows:

variant alters the "accent" color.
isActive switches the default inactive text color #9b9b9b to the accent color.

In CVA, you are able to set a boolean value of true for the variant but not for false. In cases where the condition is false, the defaultVariants can be used to add the appropriate classes.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482b243b30087a66796679">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bab5b8aaaaf4afb8abb0b8b7babcf4b8acadb1b6abb0ada099e9f7eef7e9">[email protected]</a>/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>

Answer 2

Utilizing CSS variables in CVA class names is a great way to customize your styling.

The conditions can be rationalized as follows:

variant alters the "accent" color.
isActive switches the default inactive text color #9b9b9b to the accent color.

In CVA, you are able to set a boolean value of true for the variant but not for false. In cases where the condition is false, the defaultVariants can be used to add the appropriate classes.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482b243b30087a66796679">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bab5b8aaaaf4afb8abb0b8b7babcf4b8acadb1b6abb0ada099e9f7eef7e9">[email protected]</a>/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>

Answer 3

Answer №2

From what I have gathered, it seems like you are attempting to achieve the following:

const dynamicTextContent = createDynamicTextContent("", {
  variations: {
    variation: {
      inverted: "hover:text-white",
      default: "hover:text-stone-950",
    },
    status: {
      active: "",
      inactive: "text-[#9b9b9b]",
    },
  },
  compoundVariations: [
    { variation: "default", state: "active", className: "text-stone-950" },
    { variation: "inverted", state: "active", className: "text-white" },
  ],
});

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

Answer 4

From what I have gathered, it seems like you are attempting to achieve the following:

const dynamicTextContent = createDynamicTextContent("", {
  variations: {
    variation: {
      inverted: "hover:text-white",
      default: "hover:text-stone-950",
    },
    status: {
      active: "",
      inactive: "text-[#9b9b9b]",
    },
  },
  compoundVariations: [
    { variation: "default", state: "active", className: "text-stone-950" },
    { variation: "inverted", state: "active", className: "text-white" },
  ],
});

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

What is the process for transforming conditional classes from clxs to cva format?

Answer №1

Answer №2

Similar questions

Choose according to reactjs using react-select

When utilizing Angular, the mat-datepicker is displayed underneath the modal, even after attempting to modify the z-index

Issue with exporting Typescript React component

Is there a way to remove backdrop-filter: blur effect from elements within a div?

During the rendering process, the array mysteriously disappears

Error: The current element cannot be clicked. Please try again

Issue with fortawesome icon: relative and absolute positioning not functioning as expected

Combining React components with SCSS styles from separate files may cause overlap

Issue: I am encountering a "Not Found" error when attempting to render the chart

Ensure that the header stays centered on the page as you scroll horizontally

Fade In/Out Scroll Effect

What is the best way to position a div at the bottom of the main div?

Inadequate text alignment

Omitting an element from the CSS styling

site with scrolling options in various directions

Exploring the benefits of using getServerSideProps with NextJS and Typescript for

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

CSS guidelines for handling single line breaks with the white-space property set to pre-wrap

The strange behavior of !important, display:none, and .height()

Tips for refreshing the appearance of a window in angular when it is resized