css - Material UI GridTile 不显示没有标题的 actionIcon

Question

我正在使用 Material-UI GridList 在我的 React 应用程序中显示一些图片。我希望在我的 GridTile 组件中的图像顶部有一个 IconButton。我可以通过将按钮传递给 actionIcon Prop 来完成此操作。但只有当我还传递了一个 title Prop 时它才会出现。在 (title='image') 时看起来像这样:

没有 title 属性，叠加层不会显示。传递 title='' 和 title={null} 都有相同的结果。

是否有任何其他方法可以在 GridTile 中的图像顶部放置一个 IconButton？我的目标是得到这样的结果:

提前致谢，感谢任何建议!

Answer 1

仅当 title 的计算结果为 true 时，GridTile 组件才会显示叠加层和 actionIcon(截至撰写本文时，您可以看到围绕 line 200 of the source 的测试)。 null、undefined 和一个空字符串都测试为 false，这就是为什么您在使用这些值。

一种解决方法是提供一个对显示没有影响但不是false 的title，如空格(' ')。例如，以下图 block 将有一个叠加层和可见的 actionIcon 但实际上没有标题:

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

据我所知，这是 material-ui v0 中唯一可能的修复(除了自己实现此功能并提交拉取请求)。要获得更好、更优雅的解决方案，您将不得不考虑 material-ui v1。

Material-ui v1 有一个 GridListTileBar 组件，它控制叠加层、图标和标题的显示。这使您可以细粒度地控制要显示的内容，这样您就可以在没有变通办法的情况下实现所需的行为。

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