styled function issue with Component with as prop

[imshubhamsingh]

Description

styled from jsx ( https://panda-css.com/docs/concepts/style-props#factory-function) function allows you to enable style props to a Component. Issue with this is that if a component also accept as prop. The styled function use this as prop to render the HTML tag instead of actual Component.

panda/packages/generator/src/artifacts/react-jsx/jsx.ts

Lines 31 to 34 in 9da8bbd

	const __base__ = Dynamic.__base__ || Dynamic
	const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
	const { as: Element = __base__, children, ...restProps } = props

For now to get around this problem, I'm managing this using splitCssProps directly and not using styled
I'm creating a design system using Panda. as prop will be a well used prop for primitive components.

We can add few checks to compute what Element should be. Below should work, I'm guessing there can be few other cases.

     const { children, ...restProps } = props
     const Element = __base__ || props.as

I've just started using Panda in production, so far happy with it. If the above solution sounds good, I can also create a fix PR

Panda CSS Version

0.46.0

[segunadebayo]

Do you have a reproduction for the issue? That’ll help me better understand what you mean

[imshubhamsingh]

Sure @segunadebayo here is a codesandbox describing the issue https://codesandbox.io/p/devbox/stupefied-mestorf-s5j87f?workspaceId=b4135214-832e-467e-af4e-c0b69cb075ed. In the code, there's a sample component called Component, which accepts text and as as props. Another component, StyledComponent, is a styled version of Component, enables html style props. In the App.jsx file, I've used both components in the same way, but the rendered output differs.

I hope this helps.