Using a Link component with ListItem and Typescript

Question

I'm using material-ui v3.5.1

I want to make ListItem use the Link component like so:

<ListItem component={Link} to="/some/path">
  <ListItemText primary="Text" />
</ListItem>

but Typescript greets me with a lengthy error message (the word "component" is highlighted in VSCode), at the bottom it says:

The type "typeof Link" cannot be assigned to the type "ComponentClass<ListItemProps, any>"

Property 'to' is missing in type 'ListItemProps' but required in type 'Readonly'. [2322]

Is there a workaround to get things like these to work with Typescript?

Thanks!

Answer 1

That is currently a limitation of our type declarations (until we move to generic props). As a temporary workaround you can extract your link into another component e.g.

function SomePathLink(props: ButtonBaseProps) {
  return <Link to="/some/path" {...props} />
}

<ListItem component={SomePathLink}>
  <ListItemText primary="Text" />
</ListItem>

More detailed explanation in the docs: https://material-ui.com/demos/buttons/#third-party-routing-library