Override CVA/SVA styles with className

[outofthisworld]

I am wondering if there is any way to easily override cva/sva variant classes with classes provided to the component later

const Test = cva({
  base: {
    bg: "red",
    _hover: {
      bg: "blue",
    },
  },
});

export default async function Home(props: any) {
  return (
    <main className={classes.main}>
      <styled.button className={cx(Test(), css({ bg: "orange", width:"200px" }))}>
        Hello
      </styled.button>
    </main>
  );
}

In this example the button will have a background of red and a width of 200px. The bg of red takes precendence over the background of orange. This doesn't work like it typically would, as cx(css({bg:'red'}), css({bg:'orange'})) applied to a element would result in an orange background. This behaviour only changes when cva/sva is involved.

Most styling libraries produce classNames, and are unaware of the css prop so want a solution that can play nice with other libraries (which involves the component taking a className to override styles)

I have figured I can do cx(Test(), cva({base:{bg:'orange'}})) to have the orange background applied but this feels more like a hack, and again doesn't work outside the context of Panda. Again we can also use css({bg:'orange !Important'}) but that's another hack.

I believe this has to do with the order that the css is generated.. maybe the cva/sva stuff is generated after any css() styles?

maybe if there was a way to scope the generated css to give it more specificity ? e.g css({bg:'red'}, {scope:'button'}) produces .button.bg_red in the css?

Am now thinking maybe it would work with external libs passing className as long as those styles/css were on the page after anything generated by Panda.. regardless it would be good to find a way that we can do this in systems just using Panda

UPDATE: Just clarified that its undeterministic whether or not css or JSX style attributes get applied to an element that is using cva/sva. I tried <Element className={cva()} css={{width:'100px'}} /> and it didn't work when cva provides base width of '200px' however attempted the same with css={{width:'80px'}} and it worked. Definitely down to order of generated styles, question is how to get around that.

[segunadebayo]

Hi @outofthisworld,

You can achieve style merging by using the .raw(...) method on the cva, and merging the styles with the css function.

.raw(...) returns the resolved style object

const mergedClassName = css(Test.raw(...), { bg: "orange", width:"200px" })

[outofthisworld]

Hi @segunadebayo

What about merging styles from an already generated classname? e.g something already run through the css() function to generate a classname?

[segunadebayo]

You could achieve the same with css function by switching to the .raw version to preserve the object.

const existingStyles = css.raw({...})

const merged = css(existingStyle, { bg: "orange", width:"200px" })

[outofthisworld]

You could achieve the same with css function by switching to the .raw version to preserve the object.

const existingStyles = css.raw({...})

const merged = css(existingStyle, { bg: "orange", width:"200px" })

You could achieve the same with css function by switching to the .raw version to preserve the object.

const existingStyles = css.raw({...})

const merged = css(existingStyle, { bg: "orange", width:"200px" })

You could achieve the same with css function by switching to the .raw version to preserve the object.

const existingStyles = css.raw({...})

const merged = css(existingStyle, { bg: "orange", width:"200px" })

Thanks @segunadebayo.

Just lastly what in the following scenario?

SomeComponent.tsx

function SomeComponent({ className }){
    return <div className={cx(css({ width:500px, height:500px, background: 'orange' }), className)}> MyDiv </div>
}

myfile.css

.some_class{
  width:200px;
  height:200px;
  background: 'red';
}

Page.tsx
<SomeComponent className="some_class"/>

Is that always going to work? It should for user defined styles right? but for instance this wouldn't...

<SomeComponent className={css({ background:'green' })}/>

[segunadebayo]

That’s correct.

User defined styles have the highest specificity since they’re not wrapped in a cascade layer