Property 'as' does not exist on type 'IntrinsicAttributes & Omit<HTMLStyledProps<"div">, never>' about panda HOT 4 CLOSED

@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

from panda.

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

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

from panda.

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.

from panda.

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.

from panda.