Materia-ui and typescript No overload matches this call

Question

I'm converting a js component that uses Material-ui to typescript and I ran into a problem. This part was rendering a tile-like image in which the component prop was overridden plus additional to prop to make a proper clickable link.

The error I get is: TS2769: No overload matches this call.

Here is the code I'm using:

Importing statement:

import GridListTile from '@material-ui/core/GridListTile';
import { Link } from 'react-router-dom';

And in render function I have:

<GridListTile
  component={Link} <<-- here I get the error
  to={'/some-address'}
>
  // other components
</GridListTile>

I can silence the error by passing as any , but then it complains about to prop!

<GridListTile
  component={Link as any} <<-- won't complain
  to={'/some-address'} <<-- but now here I get the error
>
  // other components
</GridListTile>

I want to be able to use Material-ui components and be able to pass another component and the props I want. I came across some solutions which were hacks, what is the correct way to handle this situation?

Answer 1

It was a bug in material-ui that was fixed in this commit , and I've checked the latest version (v4.9.13) and it was okay.

So upgrading to the latest version will fix this issue.