如何使用材质 UI 处理不同布局中的网格

Question

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

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

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

因此，我的窗口具有材质 UI 的 12 个标准列。

在此窗口中，红色部分 (1( 占 2 列。 另一个重要部分(2(是10列。

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

如何将我的蓝色元素设计为始终采用"整个窗口的 3 列"而不是"父元素的 3 列"？

因为，此时我可以编码：

红色部分 = 2 列

大部分 = 10 列

蓝色元素 = 10 列中的 3 列

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

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

我希望在我的问题中清楚。

谢谢大家！

Answer 1

这可以通过嵌套网格或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>