How to override a recipe?

[xphstos]

Hi all!

I was testing panda and so far I like it a lot!
I stumbled upon an issue that it's not documented or it's not clear to me.

Let's assume we have the a simple recipe:
CVA or defineRecipe it doesn't matter

export const buttonRecipe = defineRecipe({
  name: "button",
  description: "Button recipe...",
  base: {
    display: "inline-flex",
    justifyContent: "center",
    padding: ".75em 1em",
    cursor: "pointer",
  },
  variants: {
    color: {
      primary: {
        backgroundColor: "#333",
        color: "white",
        "&:hover": {
          backgroundColor: "#208764",
        },
      },
      naked: {
        "&:hover": {
          backgroundColor: "#fcf9f5",
        },
      },
    },
  },
  defaultVariants: {
    color: "primary",
  },
});

I use the button in my code like this...

<button className={button({ color: "primary" })}>Click me</button>

...and I want to override or add extra styling like alignSelf.

My solution for the moment - that I'm not so fond of - is to use the recipe with JSX style props.

<styled.button className={button({ color: "primary" })} alignSelf="center">Click me</button>

---

My question is:
Is there an elegant way to add overrides when using recipes or using JSX style props to do so?

[astahmer]

you can do it without style props, like

import { css, cx } from "../styled-system/css"
<button className={cx(button({ color: "primary" }), css({ alignSelf: "center" }))}>Click me</button>

[xphstos]

Oh ofc!! How I did not think of that before!?
I could use the cx library!

Thanks!

[outofthisworld]

This doesn't work if you are trying to override the same css property e.g cx(button({color:'primary'}), css({color:'white', bg:'orange'})) if base: {background:'blue.100', color:'yellow.100'} will result in the styles from the variant being set, not the css() call

Any idea how we can make the css take precedence? Basically want a way for a className provided to a component that is created using CVA or SVA to take precedence over the CVA/SVA classes. That would mean if someone is using a different component library with a component lib created with Panda it will play nice and not require a css prop...

[RuiHirano]

This way does not work for me. How can I override recipe style with same property name?

[astahmer]

you can override a cva / sva styling using the .raw method, described here https://panda-css.com/docs/concepts/writing-styles#merging-styles