Material-UI@next全屏网格布局失效：双Paper响应式布局需求咨询

嘿，我刚帮你梳理了下你遇到的全屏网格布局问题，大概率是几个常见的细节没处理好。咱们一步步来搞定它：

你代码里可能踩的坑 #

1. Container默认内边距：Container组件自带左右内边距，会导致内容无法完全贴住屏幕边缘
2. 父容器高度未设置：如果html、body或者你的根组件没有设100%高度，网格根本没法“撑满”全屏
3. Paper未占满Grid项：Paper默认是内容高度，不会自动填满对应的Grid格子
4. 旧版spacing写法错误：Material-UI@next（也就是MUI v5预览版）里spacing已经不用24这种数值了，现在是1-12的数字，对应8px的倍数

完整可运行的代码示例 #

先给全局样式加个基础设置，确保整个视口没有默认边距：

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

然后是组件代码（MUI v5版本）：

import { Grid, Paper, Box } from '@mui/material';

export default function FullScreenGrid() {
  return (
    {/* 用Box代替Container，避免默认内边距；或者给Container加disableGutters属性 */}
    <Box sx={{ height: '100%' }}>
      {/* 给网格容器设置100%高度，让它填满父容器 */}
      <Grid container spacing={2} sx={{ height: '100%' }}>
        {/* 第一个Paper，始终占满整行 */}
        <Grid item xs={12} sx={{ height: '50%' }}>
          <Paper 
            sx={{ 
              height: '100%', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center' 
            }}
          >
            第一个全屏Paper
          </Paper>
        </Grid>
        {/* 下面两个Paper，大屏各占一半，小屏自动单列 */}
        <Grid item xs={12} sm={6} sx={{ height: '50%' }}>
          <Paper 
            sx={{ 
              height: '100%', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center' 
            }}
          >
            xs=12 sm=6
          </Paper>
        </Grid>
        <Grid item xs={12} sm={6} sx={{ height: '50%' }}>
          <Paper 
            sx={{ 
              height: '100%', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center' 
            }}
          >
            xs=12 sm=6
          </Paper>
        </Grid>
      </Grid>
    </Box>
  );
}

关键细节解释 #

• 全局样式：必须让html、body、根容器（#root）都设100%高度，消除默认的margin和padding，不然网格没有“全屏”的基础空间
• Grid容器高度：给Grid container加height: '100%'，让它撑满父容器
• Grid项高度：这里我给每个item设了50%高度，你也可以用flexGrow: 1让它们自动分配剩余空间
• Paper铺满：给Paper设height: '100%'，确保它填满对应的Grid项；flex布局是为了让内容居中，可选
• 响应式设置：xs={12}确保屏幕宽度<600px时每个item占满整行，sm={6}在≥600px时各占一半，完美实现你的需求

如果你用的是Material-UI v4（@material-ui/core），只需要把sx换成makeStyles写法就行：

import { Grid, Paper, Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: { height: '100%', margin: 0, padding: 0 },
  gridContainer: { height: '100%' },
  gridItem: { height: '50%' },
  paper: {
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default function FullScreenGrid() {
  const classes = useStyles();
  return (
    <Box className={classes.root}>
      <Grid container spacing={2} className={classes.gridContainer}>
        <Grid item xs={12} className={classes.gridItem}>
          <Paper className={classes.paper}>第一个全屏Paper</Paper>
        </Grid>
        <Grid item xs={12} sm={6} className={classes.gridItem}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6} className={classes.gridItem}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
      </Grid>
    </Box>
  );
}

最后排查小技巧 #

如果还是没铺满，检查下：

• 有没有其他父元素设置了overflow: hidden或者固定高度
• 有没有给Grid/Paper加了额外的margin/padding
• 浏览器控制台有没有样式冲突的警告

内容的提问来源于stack exchange，提问作者James