javascript - Material UI GridTile 高度

Question

我目前正在使用 Material ui，但遇到了 GridLists 的问题。我有一个带有多个 GridTiles 的 GridList，但我没有看到任何方法可以单独更改每个 GridList 的高度。我们为 GridLists 提供了一个 prop，让我们指定 GridList cellHeight，但不能为单个 GridTiles 指定。有谁知道有什么方法可以实现这一点吗？

Material ui 网站上的 GriList 条目 Material Ui Grid List

我目前有以下内容(不起作用)。

<GridList style={gridListStyle}>
    <GridTile style={gridStyle1} titlePosition="bottom">
        <div>
            stuff
        </div>
    </GridTile>
    <GridTile style={gridStyle2}>
        <div>
           junk
        </div>
    </GridTile>
</GridList>

Answer 1

虽然这不是一个理想的解决方案，但我最终通过添加 100% 高度来覆盖 GridTile 组件的高度!重要。这使我能够将高度设置为我需要的高度。

  var gridTileStyle= {
      position: 'relative',
      float: 'left',
      width: '100%',
      minHeight: '400px',
      minWidth: '664px',
      overflow: 'hidden',
      height: '100% !important'
}

这允许组件在页面变小时在窗口中动态调整大小，而其下方的 GridTile 不会与其重叠。希望这对将来的其他人有帮助。