材質 UI GridTile 高度

Question

我目前正在使用材料 ui，但遇到了 GridLists 問題。 我有一個帶有多個 GridTiles 的 GridList，我看不到任何方法可以單獨更改每個 GridList 的高度。 我們為 GridLists 提供了一個道具，讓我們指定 GridList cellHeight，但不能為單個 GridTiles 指定。 有誰知道實現這一目標的方法？

材料 ui 站點上的 GriList 條目材料 Ui 網格列表

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

<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樣式，這可以幫助您適當地間隔 Tiles； 有關Material-UI可用的 flex 設置的示例，請參閱https://material-ui.com/layout/grid/ （不要僅僅因為您看到grid而停止 - 我也已在GridList成功實現了這些屬性！）。

Answer 3

設置minHeight: '100vh'幫助我將網格元素設置為 100% 的高度。 我嘗試了所有其他元素和變體，但沒有幫助。