Question

我目前正在使用材料ui，我遇到了GridLists的一个问题。我有一个GridList与多个GridTiles，我没有看到任何方法来单独更改每个GridList的高度。我们为GridLists提供了一个prop，它允许我们指定GridList cellHeight，但不能指定单个GridTiles。有谁知道如何实现这个目标？

材料网站Material Ui Grid List

上的GriList条目

我目前有以下内容（不起作用）。

<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不会重叠它。希望这有助于将来的其他人。

Answer 2

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

Answer 3

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

材质UI GridTile高度

3 个答案: