我正在使用Material-UI GridList在我的React应用程序中显示一些图片。我希望在GridTile组件中的图像顶部有一个IconButton。我可以通过将按钮传递给actionIcon
道具来实现这一目标。但它只会出现,如果我也通过title
道具。看起来像这样(title='image'
):
如果没有title
道具,叠加层就不会显示。通过title=''
和title={null}
都有相同的结果。
还有其他方法可以在GridTile中的图像顶部放置一个IconButton吗?我的目标是最终得到这样的东西:
在此先感谢,我感谢任何建议!
只有当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
和所有这些功能,而无需在应用程序的其余部分进行太多更改。