如何将clsx条件类转换为cva？附代码示例求助

我正尝试将以下clsx代码转换为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写法？

你可以给cva新增一个active变体，结合原有的variant变体处理状态组合，避免冗余的变体类型：

const textContentCva = cva("cursor-pointer", {
  variants: {
    variant: {
      inverted: "hover:text-white",
      default: "hover:text-stone-950"
    },
    active: {
      true: {
        inverted: "text-white",
        default: "text-stone-950"
      },
      false: "text-[#9b9b9b]"
    }
  }
});

在组件中调用时，直接传入两个变体参数即可：

{items.map((item, index) => {
  const isActive = item.key === SOMETHING;
  return (
    <div
      key={index}
      className={textContentCva({ variant, active: isActive })}
    >...</div>
  );
})}

补充说明 #

• 把cursor-pointer作为cva的基础类，无需单独拼接
• active变体的true分支支持基于variant的值返回对应样式，这是cva的变体嵌套写法
• 如果觉得嵌套写法不够直观，也可以用compoundVariants明确定义组合规则，效果一致：

const textContentCva = cva("cursor-pointer", {
  variants: {
    variant: {
      inverted: "hover:text-white",
      default: "hover:text-stone-950"
    },
    active: {
      true: "",
      false: "text-[#9b9b9b]"
    }
  },
  compoundVariants: [
    { variant: "inverted", active: true, className: "text-white" },
    { variant: "default", active: true, className: "text-stone-950" }
  ]
});

内容的提问来源于stack exchange，提问作者ajayv