如何将条件类从 clxs 转换为 cva？

Question

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

Answer 1

到目前为止我所了解的是，您正在尝试执行以下操作：

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