为什么Material UI中设置xs={12}的Grid组件在移动端无法占满屏幕宽度？

解决方案 #

你遇到的Grid xs={12}移动端未占满宽度的问题，可按以下步骤排查修复：

• 修复嵌套Grid的属性声明错误
  MUI Grid的核心规则是 所有Grid container的直接子元素必须是Grid item，你代码中外层direction='column'的Grid container的前两个直接子节点都是container类型，但没有加item属性，会导致布局计算异常，出现多余留白。直接给这两个嵌套container加上item属性即可：

  <Grid item container justifyContent='center'>
  <Grid item container justifyContent='center' alignItems='center'>
  

• 移除Grid container的默认内边距
  Grid container默认会根据spacing参数生成左右内边距，你可以给最外层的Grid container添加disableGutters属性，彻底移除默认的左右留白：

  <Grid container direction='column' disableGutters>
  

• 排查内部组件样式
  如果完成以上修改后仍有右侧留白，检查Header、路由对应页面组件、Footer是否设置了固定宽度、右侧外边距/内边距，或者内容宽度超出容器导致横向溢出，可给这些组件添加临时背景色快速排查边界范围。

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