[英]Material UI GridTile height
我目前正在使用材料 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>
虽然不是一个理想的解决方案,但我最终通过添加 100% 高度来覆盖 GridTile 组件的高度!重要。 这使我可以将高度设置为我需要的高度。
var gridTileStyle= {
position: 'relative',
float: 'left',
width: '100%',
minHeight: '400px',
minWidth: '664px',
overflow: 'hidden',
height: '100% !important'
}
这允许组件随着页面变小而在窗口中动态调整大小,而其下方的 GridTile 不会与它重叠。 希望这有助于将来的其他人。
您还可以添加一些flex
样式,这可以帮助您适当地间隔 Tiles; 有关Material-UI
可用的 flex 设置的示例,请参阅https://material-ui.com/layout/grid/ (不要仅仅因为您看到grid
而停止 - 我也已在GridList
成功实现了这些属性!)。
设置minHeight: '100vh'
帮助我将网格元素设置为 100% 的高度。 我尝试了所有其他元素和变体,但没有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.