材质 UI GridTile 高度

Posted 2023-02-22

【中文标题】材质 UI GridTile 高度

【英文标题】：Material UI GridTile height

【发布时间】：2017-01-04 02:48:10

【问题描述】：

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

材料 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>

【问题讨论】：

如果我在GridList 上设置cellHeight 或在GridTile 上设置css style 道具的高度它们都对我有用（材料0.15.0）。

问题来了，当你开始给它们所有单独的样式高度，然后它们开始重叠。当您动态调整页面大小时，无法阻止它们在某些时候重叠。

@Igorsvee 我想问一个更好的问题是，如何阻止 GridTiles 相互重叠？

可能有边距和媒体查询@Shadowvail

@Igorsvee 好的，我做了类似的事情来回答这个问题。虽然不是一个理想的解决方案，但我最终覆盖了 GridTile 组件的高度，但将 100% 高度 !important 推到了父级。这解决了问题。感谢您的帮助。

【参考方案1】：

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

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

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

【参考方案2】：

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

【讨论】：

@Shadowvail，您发现以上内容对您的问题的回答有用吗？

【参考方案3】：

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