如何使用 Material Ui 处理不同布局的网格答案

【问题标题】：How to deal with grid in different layout with Material Ui如何使用 Material Ui 处理不同布局的网格
【发布时间】：2020-10-13 16:32:29
【问题描述】：

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

我正在尝试了解如何在 Material-ui 中使用网格。

这是解释我的问题的图片： Picture which explain my problem

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

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

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

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

因为，此时我可以编码：

红色部分 = 2 列

大部分 = 10 列

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

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

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

我希望清楚我的问题。

谢谢大家！

【问题讨论】：

标签： reactjs grid material-ui frontend jsx

【解决方案1】：

这可以通过嵌套Grid 或CSS Grid Layout 来解决

示例

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>

【讨论】：