Is there any way to pass custom values into the cva function?

[dawidseipold]

Just like in the question. Can I for example provide the custom color and based on this the render the classes?
With classnames package, what I would normally do is converting the variable into a function like this:

const base = (color: string) => cn(`bg-${color}`);

But since the variable we create with cva is already a function, I'm not really sure how to do it.

Essentially what I want to achieve:

export const button = (color:string) => cva('font-family:outfit py:12 px:16', {
  variants: {
    type: {
      blank: '',
      outlined: 'border:1|solid',
      filled: 'border:1|solid',
    },
    backgroundColor: {
      primary: '#fff',
      secondary: '#000',
      accent: '#222',
      custom: color
    },
  },

  defaultVariants: {
    type: 'outlined',
  },
});

[joe-bell]

Sure you can, but you just need to make sure those classes exist — Tailwind’s JIT engine doesn’t support dynamic strings, but there’s no reason you couldn’t pre-define these somewhere else

[dawidseipold]

I'm actually using Master CSS, which supports dynamic classes.
Anyway, the example above produces type errors, and doesn't really work.

Type '{ children: string; type: string; }' is not assignable to type 'IntrinsicAttributes & IProps'.
Property 'type' does not exist on type 'IntrinsicAttributes & IProps'.ts(2322)

I create IProps interface which extends VariantProps<typeof button>. It happens only when I transform the variable into a function like this:

const button = (color:string) => cva()

Any idea on how to make that work?

[joe-bell]

So this does work:

export const button = (color: string) =>
  cva('font-family:outfit py:12 px:16', {
    variants: {
      type: {
        blank: '',
        outlined: 'border:1|solid',
        filled: 'border:1|solid',
      },
      backgroundColor: {
        primary: '#fff',
        secondary: '#000',
        accent: '#222',
        custom: color,
      },
    },
    defaultVariants: {
      backgroundColor: 'custom',
      type: 'outlined',
    },
  })();

but you can't really access the cva function's types to generate types correctly on the parent function..

---

Perhaps you might want to consider a different solution using custom properties?

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

enum vars {
  buttonBackgroundColor = '--button-background-color'
}

const button = cva("font-family:outfit py:12 px:16", {
  variants: {
    type: {
      blank: "",
      outlined: "border:1|solid",
      filled: "border:1|solid",
    },
    backgroundColor: {
      primary: "#fff",
      secondary: "#000",
      accent: "#222",
      custom: `var(${vars.buttonBackgroundColor})`,
    },
  },
  defaultVariants: {
    type: "outlined",
  },
});

interface ButtonProps
  extends React.HTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {
  color?: string;
}

const Button: React.FC<ButtonProps> = ({
  backgroundColor,
  children,
  className,
  color,
  type,
  ...props
}) => {
  return (
    <button
      {...props}
      className={button({ type, backgroundColor, class: className })}
      style={color && { [vars.buttonBackgroundColor]: color }}
    >
      {children}
    </button>
  );
};

export default function App() {
  return (
    <div>
      <Button backgroundColor="custom" color="red">
        Hello!
      </Button>
    </div>
  );
}

which returns

<div>
  <button class="font-family:outfit py:12 px:16 border:1|solid var(--button-background-color)" style="--button-background-color:red;">Hello!</button>
</div>

[joe-bell]

Anyway that's the best I can offer for now – hope it helps!