Merging className with Priority in cx

[Kakeru-Miyazaki]

Hello everyone,

I'm currently working with the cx function from 🐼 in a React component. My goal is to merge styles received from Props (crafted with PandaCSS's css) with a predefined baseStyle. However, I've hit a snag.

Here's what I'm doing:

<div className={cx(baseStyle, styleFromProps)}>some text</div>

When there's an overlap between styleFromProps and baseStyle, I want to ensure that the styles from styleFromProps take precedence. Does anyone have a nifty solution for this?

Thanks in advance!

[anubra266]

@Kakeru-Miyazaki cx is just a string concatenator, because css resolve to string classNames.
To merge styles see https://panda-css.com/docs/concepts/writing-styles#merging-styles

[sina-salahshour]

Hi. would it possible to have a functionality similar to tailwind-merge? this plugin also concatenates strings, but checks for overlapping classes too.

[astahmer]

yes, this is built-in with the css function
if you want it to work with cx, you'd need something like panda-cx-deduplicator

[sina-salahshour]

thank you for your response 🙏🏻

[Kakeru-Miyazaki]

Oh, my apologies.
I mistakenly mixed up cx and css!

This is precisely what I've been searching for. I truly appreciate your help. Thank you so much.