Support for "as" prop in styled components

[dugip]

I was wondering if the as prop is accepted for components created via styled. Oftentimes there is a need to render a given component as another tag. As of now, this is the error that I get:

Property 'as' does not exist on type 'IntrinsicAttributes & { media?: string | undefined; hidden?: boolean | undefined; style?: CSSProperties | undefined; type?: string | undefined; ... 272 more ...; htmlContent?: string | undefined; } & { ...; }'.

Example:

import { styled } from '../../styled-system/jsx';

const Text = styled('p', ...);

...

<Text as="span"></Text>
<Text as="h1"></Text>

Thanks!

[astahmer]

hey, it's been discussed here

tldr is:

yes the as child works at runtime, but the typings will throw an error since as child is very hard to type right without slowing TS in your IDE

the asChild is a better pattern, we don't provide it from the styled factory as it might be hard to get it to work the same in all the JSX frameworks we support, instead you can use for example the @ark-ui/react/factory