stitches migration; the as prop.

[hainessss]

Hello, I am migrating our stitchesJS styled component library to Panda CSS. the styled function in stitches returns a component with an as prop so that you could do things like..

<Box as='img' />
or
<Box as='span' />

it doesn't look like the component returned by the panda styled function has that prop? I am wondering what would be the best way to convert these components to Panda. Thanks!

[anubra266]

@hainessss

Check out this playground:
https://play.panda-css.com/JzPVnnizuC

const Img = styled('img')
const span = styled('span')

You might find this doc helpful
https://panda-css.com/docs/migration/stitches#styled-function

[hainessss]

okay so the answer is to just create helpers for each element

[omarkhatibco]

better option is to use styled.span or styled.img.

for button or things that needs custom style use radix asChild component