Material UI GridTile 高度

Question

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

GriList 在 material ui 网站上的条目 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'
}

这允许组件在 window 中随着页面变小而动态调整大小，而不会与下方的 GridTile 重叠。希望这对以后的其他人有所帮助。

Answer 2

您还可以添加一些 flex 样式，这可以帮助您适当地间隔您的 Tiles；有关 Material-UI 中可用的 flex 设置的示例，请参阅 https://material-ui.com/layout/grid/（不要仅仅因为看到 grid 就停止 - 我也在 GridList 中成功实现了这些属性！） .

Answer 3

设置minHeight: '100vh' 帮助我将网格元素设置为 100% 的高度。我尝试了所有其他元素和变体，但没有帮助。

Material UI GridTile 高度

Material UI GridTile height

html

javascript

reactjs

material-ui