Which is more prioritized, config recipes compoundVariants or Atomic Recipe?

[uhuikim]

hello

I'm creating a component utilizing panda css and I have a question.

I'm using compoundVariants to create a button component because there are many different combinations.

export const button = defineSlotRecipe({
  className: 'button',
  description: 'The styles for the Button component',
  slots: ['root', 'icon', 'startIcon', 'endIcon'],
  base : {},
  variants : {
	  size : {xLarge : {}, large : {} , medium :{} , small:{}},
	  color : { primary: {},secondary: {},error: {},},
	  variant : {text: {}, outlined: {}, contained: {}},
  },
  compoundVariants : [
    {
      variant: 'text',
      color: 'error',
      css: {
        root: {
          color: 'error.10',
          _hover: { backgroundColor: 'error.a1' },
          _active: { _after: { opacity: 1 } },
        },
      },
    },
    ...
  ]
  })

I checked and it seems that the styles for compoundVariants are created in @layer utilities.

When I create atomic recipes in the parent component and pass them in, they are also created in @layer utilities.

Which is more prioritized?

Also, is there a difference between getting the className when merging styles from the parent and getting the css prop and merging it into cx?

const Test = () =>{
  return (<Button className={css({backgroundColor : 'red'})}/>)
}

const Button = ({className}) => {
   return (
     <button  className={cx(classes.root, className)}/>
  )
}


or

const Test = () =>{
  return (<Button css={css.raw({backgroundColor : 'red'})}/>)
}

const Button = ({css}) => {
   return (
     <button  className={cx(classes.root, css)}/>
  )
}

In the official documentation, the css prop is taken and passed, but I'm wondering if there is any difference between that and creating a className and passing it.