Styles override doesn't work properly

[Emiliano-Bucci]

Description

It seems that when trying to override styles from outside a component using the cx() utility to merge internal and external classes, the ones that should override the internal ones doesn't work. It seems that if the className arrives from an external prop it doesn't work properly, but if the classNames are defined internally, it does.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-2cufqt?file=src%2FApp.tsx,src%2FComp.tsx&terminal=dev

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

React

Panda CSS Version

0.4.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[pawelblaszczyk5]

The cx function just concatenates strings https://github.com/chakra-ui/panda/blob/5d5888c516114556aafcd2174fbebe0105561f7c/packages/generator/src/artifacts/js/cx.ts

To achieve the expected effect I recommend using a pattern

[Emiliano-Bucci]

@pawelblaszczyk5 mmm, what i want is to be able to override existing styles from outside the component in a simple way; i guess that the pattern is something that is already predefined.

[pawelblaszczyk5]

I think it depends on an exact use case, you can create a custom pattern if you want a full flexibility. You can also create recipe if you want some predefined variants.

I know it's not a direct answer to your question, but usually your components shouldn't have a fully modifiable styles from the outside 😃 If you could point me to an example use case I could try to provide some better explanation/solution

[segunadebayo]

Hi @Emiliano-Bucci,

The cx function only joins class names. To get style merging working as expected, you'll need to use the JSX API, which implements style merging correctly.

https://stackblitz.com/edit/vitejs-vite-7hwybm?file=src%2FApp.tsx,src%2FComp.tsx,styled-system%2Fjsx%2Findex.d.ts,styled-system%2Fjsx%2Ffactory.d.ts&terminal=dev

[Emiliano-Bucci]

@segunadebayo Hi! I reopen because i have a doubt: is correct that this doesn't work as expected? -> https://stackblitz.com/edit/vitejs-vite-3qw93q?file=src%2FApp.tsx&terminal=dev

Should i always pass the prop css in order to panda.css understand and override correctly?

Thanks!

[anubra266]

@Emiliano-Bucci your example is against how Panda works. Panda can't know that those styles in the styles prop should be extracted.