Material ui 如何在Gatsby中向GridListTile插入链接

我试图在盖茨比内使用Material UI GridList创建一个可点击的图像网格

在GridListTile中，我无法在图像周围或GridListTileBar中放置盖茨比链接

export default function SingleLineGridList() {

    const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList className={classes.gridList} cols={1.5} cellHeight="300">
        {tileData.map(tile => (
          <GridListTile key={tile.img} className={classes.gridListTile}>
            <Link to={`product/1`}>
                <img src={tile.img} alt={tile.title} />            
            </Link>
            <GridListTileBar
                title={tile.title}
                classes={{
                    root: classes.titleBar,
                    title: classes.title,
                }}                
                />               
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

导出默认函数SingleLineGridList（）{
const classes=useStyles（）；
返回(
{tileData.map（tile=>(
))}
);
}

我收到错误“TypeError:无法读取未定义的”的属性“muiName”

我从StrightReact中找到了类似的例子，所以假设这与盖茨比链接组件有关

我意识到这可能与此有关，但不知道如何实施

---

如何使Gatsby Link元素成为GridListTile中可接受的元素？

您必须为您的组件提供一个muiNameI，我甚至不知道如何做到这一点-我返回的是一个函数，而不是类组件-代码更新以反映这一点，我将在今天晚上为您编写一个示例：）您必须为您的组件提供一个muiNameI，我不确定如何实现这样做-我将返回一个函数而不是类组件-更新代码以反映我今天晚上将为您编写一个示例：）