material-ui - 如何使用 Material-UI Grid 创建这个 'layout'？

Question

我正在尝试使用 Material-UI 网格生成以下布局...到目前为止，我只设法暴露了我对整个事情的了解有多么少。

我要创建的是:

我认为这等同于这种设计:

所以我的想法是这个结构...

<Grid container xs={12} spacing={3}>

  <Grid item xs={12} >
    <Paper className={classes.paper}>
      Top Bar
    </Paper>
  </Grid>

  <Grid container xs={12} spacing={3}>    
      <Grid container spacing={3}>
        <Paper className={classes.paper}>

          <Grid item xs={4}>
            Main Field
          </Grid>

          <Grid container xs={8}>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 1
              </Grid>
              <Grid item xs={4}>
                field 2 row 1
              </Grid>
            </Grid>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 2
              </Grid>
              <Grid item xs={4}>
                field 2 row 2
              </Grid>
            </Grid>
            <Grid container item xs={8}>
              <Grid item xs={4}>
                field 1 row 3
              </Grid>
              <Grid item xs={4}>
                field 2 row 3
              </Grid>
            </Grid>
          </Grid>
        </Paper>
      </Grid>
    </Grid>
  </Grid>

</Grid>

... 这一点都不像。一开始我无法让它以全宽显示。

我试过向各种元素添加 width={1} 属性，但没有成功。有人能给我指出正确的方向吗，或者更好的是，我是否缺少一些开发工具来使用 Material-UI 网格或类似工具来组成“布局”？

Answer 1

我设法通过开始使用 complex grid section 上的网格引用来创建您的布局的文档。

通过组合 row 和 column 方向作为最内层 Grids 的 props 并将子 Grids 外部 Paper 组件放入内部作为占位符，我们可以实现您正在寻找的东西.

代码看起来像这样:

export default function ComplexGrid() {
  return (
    <div>
      <Paper>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper>xs=12</Paper>
          </Grid>
          <Grid item xs={12} container>
            <Grid item xs container direction="column" spacing={3}>
              <Grid item xs={4}>
                <Paper>xs=4</Paper>
              </Grid>
              <Grid item xs={8}>
                <Paper>
                  <Grid item xs container direction="column" spacing={2}>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                    <Grid item xs={12}>
                      <Paper>
                        <Grid item xs container direction="row" spacing={1}>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                          <Grid item xs={6}>
                            <Paper>xs=4</Paper>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                  </Grid>
                </Paper>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

这是一个codesandbox带有代码的工作示例以及一些不太好的论文样式，但仅用作概念证明。当然，您可以根据需要更改边距、填充、大小和其他任何内容。