MUI 行与列网格答案

【问题标题】：MUI row vs column GridMUI 行与列网格
【发布时间】：2022-08-03 13:50:06
【问题描述】：

import * as React from \'react\';
import { styled } from \'@mui/material/styles\';
import Box from \'@mui/material/Box\';
import Paper from \'@mui/material/Paper\';
import Grid from \'@mui/material/Grid\';

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === \'dark\' ? \'#1A2027\' : \'#fff\',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: \'center\',
  color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
  return (
    <Box sx={{ width:\'80vw\',height:\'80vh\',background:\'lightblue\' }}>
      <Grid container spacing={2} direction=\'row\'>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
      </Grid>
    </Box>
  );
}

在 MUI 中，当direction=\'row\' 我们有以下输出

当direction=\'column\'

如果我们像css 中的flexbox 那样思考，我们期望以下

我的问题是，xs={number} 在column 模式下的目的是什么？我怎样才能获得Grid 的预期输出？

标签： reactjs material-ui

【解决方案1】：

如果你给direction="column" 给container 网格和xs={number} 在网格item，那么列的最大大小是xs 道具的大小。

<Box>
      <Grid 
        container
        direction="column"
        justifyContent="center"
        alignItems="center"
      >
        <Grid item xs={12}>
          <Item>xs=12</Item>
        </Grid>
       <Grid xs={10}>
          <Item>xs=10</Item>
        </Grid>
        <Grid xs={2}>
          <Item>xs=2</Item>
        </Grid>
      </Grid>
    </Box>

【讨论】：