Merging styles with custom components when using the styled JSX factory

[schardev]

Consider the following example:

import { styled } from 'styled-system/jsx';

const StyledRoot = styled('div', {
  base: { color: 'green' },
});

const CustomRoot = (props: any) => <StyledRoot {...props} />;

const StyledCustomRoot = styled(CustomRoot, {
  base: { color: 'red' },
});

export const App = () => {
  return (
    <StyledCustomRoot>
      This text has two `color` class names applied.
    </StyledCustomRoot>
  );
};

In this example, CustomRoot forwards all of its props to an already styled component (StyledRoot).

When CustomRoot is wrapped again with styled, the resulting element receives both the original (green) and the new (red) color class names. While the rendered color appears correct because of the class name generation/injection order, both classes remain on the element.

I was expecting the outer styled() call to effectively override or merge the styles so that only the final color declaration is emitted, avoiding duplicate/conflicting utility classes.

What is the recommended pattern for composing styled components like this while keeping the generated class names deduplicated?

If this isn't currently supported, would you consider adding support for this kind of style merging/composition? Is it already on the project roadmap or planned for a future milestone?

Edit: Playground Link - https://play.panda-css.com/JmHZuKWRTK

[sueun-dev]

the two classes stick around because panda only collapses conflicting atomic styles inside a single style pipeline. Stacking styled() over an already-styled component just concatenates two separate className strings, so c_green and c_red both land on the node. Injection order is what makes the color still look right.

so it's expected rather than a bug. To keep one deduped class, merge at the style-object level instead of wrapping. On 1.11.4 I get class="c_red" from either the css prop:

<StyledRoot css={{ color: 'red' }}>

or merging raw objects: css(base.raw(), { color: 'red' }). Same thing #3357 landed on, and it's the "Merging within JSX component" section of the Merging Styles docs.

[Adebesin-Cell]

Yes, as you said @sueun-dev, styled() only dedupes when it can compose the base's __cva__. CustomRoot is a plain function, so the outer styled() can't compose; it emits c_red, passes it as className, and StyledRoot runs cx('c_green', 'c_red'), which can't dedupe classes that already exist.

@schardev you can merge with the css prop instead, and you get one class:

<StyledRoot css={{ color: 'red' }} />

Wrapping the styled component directly (styled(StyledRoot, { base: { color: 'red' } })) composes as well.