`as` prop causes TypeError when wrapping components

Current behavior:

as prop causes TypeError for components utilizing that prop wrapped in styled()

To reproduce:

https://codesandbox.io/s/quizzical-kalam-xvgve?from-embed=&file=/src/App.tsx

Expected behavior:

I guess CreateStyled shouldn’t extend props with as prop for all cases extending components. (only for IntrinsicElements)

Environment information:

• react version: latest
• @emotion/react version: latest

[Andarist]

yeah, that’s the current behaviour, but I don’t think it is possible to conditionally change the TypeScript typing based on passing something like shouldForwardProp: prop => prop !== ‘as’.

Yeah, this is impossible/hard. If one wants to add support for as prop for their wrapped custom components then they can do this manually.

The only solution I can think of right now is not adding the as prop to the type when wrapping composite components, but that will result in wrong typing when you pass the shouldForwardProp as above.

That’s fine - this should usually be a rare situation and the full relation between input props, shouldForwardProp and the forwarded props is not validated anyway.

So I suggest removing the as prop from type definitions for composite components completely. Any thoughts?

That aligns with my current way of thinking about this - please only make sure to add some basic tests for the expected behavior.

[wolszczak96]

Not sure what kind of fix you have in mind. 😅

if you provide shouldForwardProp that doesn’t forward the as prop

yeah, that’s the current behaviour, but I don’t think it is possible to conditionally change the TypeScript typing based on passing something like shouldForwardProp: prop => prop !== 'as'.

I could do that utilising some additional prop, like shouldForwardAsProp, but it’s stupid.

The only solution I can think of right now is not adding the as prop to the type when wrapping composite components, but that will result in wrong typing when you pass the shouldForwardProp as above.

But on the other hand, are there any real-life examples of needing to render composite component as a html tag? You lose all the functionality of the wrapped component, the typing is probably wrong in most cases, as your wrapped component is probably using some fancy props, which are not applicable to html tags.

So I suggest removing the as prop from type definitions for composite components completely. Any thoughts?