Material-ui 和 typescript 没有重载匹配这个调用

Question

我正在将一个使用 Material-ui 的 js 组件转换为 typescript，但遇到了问题。这部分正在渲染一个类似平铺的图像，其中 component 属性被覆盖，加上额外的 to 属性以创建正确的可点击链接。

我得到的错误是： TS2769：没有重载匹配这个调用。

这是我正在使用的代码：

进口声明：

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

在渲染功能中我有：

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

我可以通过传递 as any 来消除错误，但随后它会抱怨 to 道具！

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

我希望能够使用 Material-ui 组件并能够传递另一个组件和我想要的道具。 我遇到了一些黑客解决方案，处理这种情况的正确方法是什么？

Answer 1

这是material-ui 中的一个错误，已在此commit 中修复，并且我检查了最新版本（v4.9.13）并没有问题。

因此升级到最新版本将解决此问题。