React Material UI嵌套网格-不起作用

问题描述 投票:0回答:1

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

enter image description here

我希望黑框延伸屏幕的长度,并且三个框在同一行上对齐。我将三个盒子放在另一个网格中,最大宽度为1200px。这样在大屏幕上看起来很整洁。我希望将这三个盒子堆放在手机上。

下面是我的代码

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的元素时,它们全部堆叠在一起。当我移除它时,它们不会堆叠,而是将整个屏幕拉长。

enter image description here

有人能指出我正确的方向吗?

reactjs material-ui
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.