How to override compound variant styles?

[jeiea]

Steps to reproduce

https://play.panda-css.com/fdAjbJzH9T

Expected behavior

Both buttons should have red background.

Actual behavior

Can't override the first button's bg style.

Questions

What is the recommended way to override compound variant styles?

[storchk]

@jeiea your button recipe looks very creative.

In your example, you don't need to use compoundVariants. The styles should therefore be assigned directly to the variant (primary or secondary). I also see type: ‘fill’, which is invalid as there is no type variant.

Your recipe:

const button = defineRecipe({
  className: 'button',
  variants: {
    color: { primary: {}, secondary: {} },
  },
  compoundVariants: [
    {
      color: 'primary',
      css: { bg: 'green' },
    },
    {
      color: 'secondary', css: { bg: 'red' }
    },
  ],
  defaultVariants: { type: 'fill', color: 'primary' },
})

Updated recipe:

const button = defineRecipe({
  className: 'button',
  variants: {
    color: {
      primary: {
        bg: 'green'
      },
      secondary: {
        bg: 'red'
      }
    },
  },
  defaultVariants: { color: 'primary' },
})

With the mentioned changes you can do this:

export const App = () => {
  return (
    <div className={center({ h: 'full' })}>
      <div
        className={css({
          display: 'flex',
          flexDirection: 'column',
          fontWeight: 'semibold',
          color: 'yellow.300',
          textAlign: 'center',
          textStyle: '4xl',
        })}
      >
        <span>🐼</span>
        <span>Hello from Panda</span>
        <button className={cx(
          button({ color: 'primary' }),
          css({ bg: 'red' })
        )}>text</button>
        <button className={cx(
          button({ color: 'secondary' }),
        )}>text</button>
      </div>
    </div>
  );
};

Check the playground: https://play.panda-css.com/nC_oN61b_s

Additional resources:

• https://www.pandamastery.com/tutorial
• https://panda-css.com/docs/docs/concepts/slot-recipes#compound-variants
• https://panda-css.com/docs/docs/concepts/recipes

Hope this helps you ✌️

[jeiea]

Unfortunately your answer doesn’t help, as my example is a simplified and somewhat contrived version of the original source.

The root cause is that compound variants share the same utilities layer, which conflicts with css styles. I haven’t found a satisfactory solution that properly resolves this issue.

I hope this clarifies my question.