Recommended approach to multi-component variants?

[Sid-Turner-Ellis]

What's the recommended approach for variants that have multiple child components?

e.g.

const MultiPartComponent = () => {
  return (
    <div className={cva({variant: "primary"})}>
      <p className={cva({variant:"primary")} > some text </p>
    </div>
  )
}

I'm assuming we should just duplicate the variants in two separate cva calls but wanted to double check

[Sid-Turner-Ellis]

Chakra UI has a nice API for this: https://chakra-ui.com/docs/styled-system/component-style#usemultistyleconfig-api

[Sid-Turner-Ellis]

@airtonix The file your referencing (https://github.com/joe-bell/cva/pull/176/files#diff-3a66adbf6d37ff730542d440d83e17ca38c1e7fbb2f821cb0d27781d03f26361) was the solution to my issue of wanting variants to have variants describe styles for multiple components

[joe-bell]

Writing a bit more here, just haven't merged yet
#176

[Sid-Turner-Ellis]

Ah thanks - so you recommend setting css variables in each variant, makes sense.

Are you passing class names purely for readability or is there another motivation for this? (I have just been putting them in a single string)

[joe-bell]

so you recommend setting css variables in each variant, makes sense.

Absolutely!

Are you passing class names purely for readability or is there another motivation for this? (I have just been putting them in a single string)

Just personal preference really

[airtonix]

Ah thanks - so you recommend setting css variables in each variant, makes sense.

@Sid-Turner-Ellis where are you seeing that ?

All I see is this: https://github.com/joe-bell/cva/pull/176/files#diff-3a66adbf6d37ff730542d440d83e17ca38c1e7fbb2f821cb0d27781d03f26361

which is not css variables, but just what you initially opened the thread with.

[airtonix]

I think what you really want is PandaCSS slot recipes: https://panda-css.com/docs/concepts/slot-recipes or if you don't want css-in-js, https://www.tailwind-variants.org/docs/introduction#split-components-into-multiple-slots