材质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和所有这些功能，而无需在应用的其余部分进行太多更改。