Property 'as' does not exist on type 'IntrinsicAttributes & Omit<HTMLStyledProps<"div">, never>'

[omarkhatibco]

Description

When I use the Box compoent with the as prop, it works fine and the generated html is correct.

but the types are complaing about the as does not exist on the types

I provide a codesandbox but it does not complain about it, but if you run the repo locally you would see the problem.

Link to Reproduction

https://codesandbox.io/p/github/omarkhatibco/pandacss-test/main?workspaceId=9697a97a-26fa-48c7-8b1a-0cc811dc4d21

Steps to reproduce

Check the Box component inside the App.tsx

JS Framework

React (TS)

Panda CSS Version

0.3.2

Browser

Latest

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

No response

[segunadebayo]

Hi @omarkhatibco,

We're trying hard not to bring back the as prop. The typescript work required to get it typed correctly is enormous; we don't want to add this for now.

Please use the styled.X syntax or the pattern function with className instead.

Thanks for understanding.

[adbutterfield]

I usually try not to comment on closed issues. But there's one really good use case for as. But maybe I just need to find another pattern?

Use case is a flexible text component, that can be either h* | p | span | li. I guess I can just make several text components that re-use the same recipe.

[omarkhatibco]

@adbutterfield let me share with you what I have done to avoid this problem.

so for things like li, ul and ol, I used patterns to generate the css function and the component.

for example, if you want to use image component, either you import it as Image or if you want to use next-image you can do so <NextImage className={image()} /> and the image function is imported from patterns

for h* and p and the rest, you don't need a component for them, I use styled.h1 or styled.p and then textStyle props for defining the styles that need to be applied such as headline.md.

check here https://fusion-you.netlify.app/?path=/story/patterns-typography-heading--default and here https://fusion-you.netlify.app/?path=/story/patterns-typography-text--with-all-element-type

[omarkhatibco]

@adbutterfield another alternative is to use Slot component from Radix-Ui with asChild pattern

https://www.radix-ui.com/primitives/docs/utilities/slot