ListItem doesn't accept prop htmlFor (TypeScript)

This is a Typescript error

The ListItem component accepts label for the prop component but doesn’t accept the htmlFor prop as it should

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

If I provide a value of label to the prop component of the ListItem component I should also be able to provide the prop htmlFor

So

<ListItem component="label" htmlFor="foo" />

should crate this HTML

<label for="foo />

Current Behavior

Instead I get the type error

Property 'htmlFor' does not exist on type 'IntrinsicAttributes & ListItemProps & { children?: ReactNode; }'.

Steps to Reproduce

Link: https://codesandbox.io/s/r0pr5qjnzq

Context

I try to use the label to trigger a hidden <input type="file" />

Your Environment

Link to my current package.json and the repo itself

[oliviertassinari]

The solution to this problem is well known but not documented. @pelotom maybe we should put it into the TypeScript guide? I don’t know I have seen this question multiples times here. Or maybe we should just direct people to StackOverflow.

@pixelkritzel You need to explicitly use an intermediate component. Here is how I would do it in pure JavaScript, you can add the typing after:

const Label = props => <label htmlFor="foo" {...props} />

<ListItem component={Label} />

[pelotom]

@oliviertassinari as it happens I’ve been working on a better solution to this problem, basically a continuation of #11731… stay tuned!