Style merging on styled factory

[existentialism]

👋

Been trying to migrate a large codebase and found something unexpected. Is this behavior intentional?

https://play.panda-css.com/n_xuAAdF03

Is there a way to merge/override styles from a styled factory without needing to resort to switching to cva's .raw():

https://play.panda-css.com/8XxPXifiM2

Or wrapping it in another style factory:

https://play.panda-css.com/ytoJ2lyJz5

?

[segunadebayo]

Please see https://panda-css.com/docs/concepts/merging-styles#merging-within-jsx-component

The ideal solution here is to use the css prop for merging not classname
https://play.panda-css.com/n_xuAAdF03/GhlNzYlHb-

import { css, cva } from 'styled-system/css';
import { styled } from 'styled-system/jsx';
import { center } from 'styled-system/patterns';

export const App = () => {
  return (
    <div className={center({ h: 'full' })}>
      <Root css={{ color: 'green' }}>Hi</Root>
    </div>
  );
};

const Root = styled('div', {
  base: {
    color: 'blue',
  },
});

[existentialism]

@segunadebayo thanks, didn't connect those dots.