材质UI GridTile不显示没有标题的actionIcon

Question

我正在使用Material-UI GridList在我的React应用程序中显示一些图片。我希望在GridTile组件中的图像顶部有一个IconButton。我可以通过将按钮传递给actionIcon道具来实现这一目标。但它只会出现，如果我也通过title道具。看起来像这样（title='image'）：

如果没有title道具，叠加层就不会显示。通过title=''和title={null}都有相同的结果。

还有其他方法可以在GridTile中的图像顶部放置一个IconButton吗？我的目标是最终得到这样的东西：

在此先感谢，我感谢任何建议！

Answer 1

只有当GridTile评估为actionIcon时，title组件才会显示叠加层和true（截至本文撰写时，您可以看到围绕line 200 of the source的测试）。 null，undefined和一个空字符串全部测试到false，这就是为什么当你使用这些值时你没有看到叠加层出现的原因。

一个解决方法是提供一个title，它对显示没有影响但不是false，就像一个空间（' '）。例如，以下图块将具有叠加并且可见actionIcon但实际上没有标题：

<GridTile
  key={tile.img}
  title={' '}
  actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
>

据我所知，这是材料-u v0中唯一可能的修复（没有自己实现此功能并提交拉取请求）。为了获得更好，更优雅的解决方案，您将不得不面向材料-ui v1。

Material-ui v1有一个GridListTileBar组件，用于控制叠加层，图标和标题的显示。这使您可以对要显示的内容进行精细控制，这样您就可以在没有解决方法的情况下实现所需的行为。

但是，我知道完全过渡到v1（有很多重大变化）可能令人生畏。如果你想只部分转换，你可以always install the two versions side by side。这将允许您使用最新的GridList和所有这些功能，而无需在应用程序的其余部分进行太多更改。