React Material UI 嵌套网格 - 不工作

Question

我正在尝试生成一个三深的网格。下面的例子：

我想让黑盒子拉伸屏幕的长度，并且三个盒子在同一行对齐。我已将三个框放在另一个网格中，最大宽度为 1200 像素。这样在大屏幕上看起来很整洁。我希望这三个盒子在移动设备上堆叠。

下面是我的代码

const Landing = (props) => {

  const useStyles = makeStyles(theme => ({
      root: {
        flexGrow: 1,
      },
      blackBox:{
          color:'white',
          backgroundColor:'black',
          width:'100%',

      }, 
      white:{
          color:'white',
      }
    }));

  const classes = useStyles();

  return (

  <div className={classes.root}>
      <Grid container className={classes.blackBox}>
         <Container maxWidth="sm">
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
              <Typography>Text  </Typography>   
           </Grid>
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
             <Typography>Text </Typography>
           </Grid>
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
             <Typography>Text</Typography>
           </Grid>
          </Container>
      </Grid>
  </div>
);

}

export default Landing;   

问题是当我添加只允许三个装箱到最大 1200 的元素时，它们都可以堆叠。当我删除它时，它们不会堆叠，而是会拉伸整个屏幕。

谁能指出我正确的方向？

Answer 1

你应该把Container放在Grid之外

<Grid container className={classes.blackBox}>
   <Container maxWidth="sm">
      <Grid container>
         <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text </Typography>
         </Grid>
         <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text </Typography>
          </Grid>
          <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text</Typography>
          </Grid>
      </Grid>
   </Container>
</Grid>