时间戳

首页 > 解决方案 > 如何使用 Material Ui 处理不同布局的网格

reactjs - 如何使用 Material Ui 处理不同布局的网格

问题描述

我很确定很多人都问过同样的问题，但我没有找到答案，对不起。

我正在尝试了解如何将网格与 Material-ui 一起使用。

这是解释我的问题的 图片：解释我的问题的图片

所以，我的窗口有 Material UI 的 12 个标准列。

在此窗口中，红色部分 (1) 占用 2 列。另一大部分 (2) 占用 10 列。

在第二部分中，我有几个蓝色元素，每个元素占用 3 列。

如何设计我的蓝色元素以始终采用“全窗口的 3 列”而不是“父元素的 3 列”？

因为，此时我可以编码：

红色部分 = 2 列

大部分 = 10 列

蓝色元素 = 10 列中的 3 列 大部分

但我不能说：蓝色元素 = 整个窗口的 3 列

我可以使用 CSS vw 属性并添加边距，但我想有一种方法可以只使用 Material-ui Grid，不是吗？

我希望清楚我的问题。

谢谢你们 ！

标签： reactjsgridmaterial-uifrontendjsx

解决方案

这可以通过嵌套网格或CSS 网格布局来解决

例子

const { useState, useEffect } = React;

const { Grid, Paper } = window.MaterialUI;

const App = () => {

return <Grid className="grid" wrap="wrap" container direction="row">
<Grid style={{flex: '1'}} container direction="column" justify="center">
  <Paper style={{border: '1px solid white', background: 'red', flex: '1'}} elevation={3}/>
  <Paper style={{border: '1px solid white', background: 'red', flex: '1'}} elevation={3}/>
</Grid>
<Grid style={{flex: '2 1 0'}}  wrap="wrap" container direction="row">
   {[...Array(9).keys()].map(pr => 
    <Paper key={pr} style={{backgroundColor: 'blue', border: '1px solid white', flex: '1 1 32%'}} />
   )}
</Grid>
</Grid>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
html, body {
  height: 100%;
  margin: 0;
}

#root, .grid {
  height: inherit;
}
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js"></script>
<div id="root"></div>

推荐阅读