Destructuring props on a styled component throws a type error on property "as"

Current behaviour: Receive the following error when destructuring props onto an emotion/styled component. Type '{ children: (ReactNode | Element)[]; accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; ... 356 more ...; key?: Key | ... 1 more ... | undefined; }' is not assignable to type '{ theme?: Theme | undefined; as?: ElementType<any> | undefined; }'. Types of property 'as' are incompatible. Type 'string | undefined' is not assignable to type 'ElementType<any> | undefined'. Type 'string' is not assignable to type 'ElementType<any> | undefined'. This occurs on any tag you destruct functional component props on. styled.<element>'s “as” property doesn’t correspond with React.HTMLProps<HTMLElement>'s “as” property (can also be HTMLButtonElement).

To reproduce: See Example Here.

1. Create a new functional component.
2. Within functional component, add an emotion styled component.
3. Add some arbitrary properties (for example elementHeight, doesn’t really matter) to the React.FC<Props> Props interface.
4. Make sure to extend the React element of whatever HTML element you wish to destruct default properties on.
5. destruct props ({…props}) on the intended HTML element

Expected behaviour:

• type of “as” corresponds with the React HTMLElement’s type of “as”.
• remaining properties that aren’t unique or overriden in FC<Props> declaration are destructured appropriately.

Environment information:

• @emotion/react 11.4.0
• @emotion/styled 11.3.0
• typescript 4.3.2
• React 16.9

[Andarist]

I recommend using React.HTMLAttributes<HTMLElement> over React.HTMLProps<HTMLElement> because this is a type of props for <nav/> element. I’m not exactly sure in what context HTMLProps should be used.

[robinmetral]

It also seems that HTMLProps<HTMLInputElement> includes extra props (in contrast to HTMLAttributes<HTMLInputElement>), like the disabled and required props.

So switching to HTMLProps worked for me in some components, but not all—I can also Omit<HTMLProps<HTMLInputElement>, "as"> but it’s not super nice.

Did you end up solving this differently?

---

Edit:

Hm so I found this and it looks like the way to go would be InputHTMLAttributes<HTMLInputElement>. Works well on my end and I could clean up some old Omit<> 🎉

The only thing I’m not sure of is why some elements are missing their *HTMLAttributes types, like ul. I assume that it’s because they don’t have any other props beyond the HTMLAttribute type (all other element-specific generics extend it), so for these I’d just use it directly: HTMLAttributes<HTMLUListElement>.