使用Material UI的Grid组件时justify属性不生效是什么原因？

• 版本属性名变更
  Material UI v4及更早版本使用justify属性控制flex主轴对齐，v5版本为了和原生CSS Flex属性命名对齐，将该属性重命名为justifyContent。如果你的项目使用的是v5及以上版本，写justify='center'不会被识别，属性不会生效。
• 容器无可用对齐空间
  你的代码中设置了direction='column'，此时主轴为垂直方向，justify（或justifyContent）控制的是垂直方向的对齐效果。默认Grid容器的高度由内部子元素的总高度撑开，没有多余的垂直空白空间时，居中对齐不会有肉眼可见的效果，需要给Grid容器设置明确高度，比如占满视口高度height: 100vh，或者设置为继承父容器的100%高度。
• 样式覆盖冲突
  如果自定义CSS、其他组件样式覆盖了Grid容器的justify-content属性，或者Grid的父容器存在高度限制、溢出隐藏等规则，也会导致对齐属性不生效，可以通过浏览器开发者工具检查Grid容器的计算样式，确认属性是否被正确应用。

修复后代码示例（适配v5+版本） #

<Grid 
  container 
  direction='column' 
  alignItems='center' 
  justifyContent='center' 
  spacing='1'
  style={{ height: '100vh' }}
>
  <Grid item xs={12}>
     <Typography variant='h1'>First Item</Typography>
  </Grid>
  <Grid item xs={12}>
     <Typography variant='h4'>First Item</Typography>
  </Grid>
  <Grid item xs={12}>
     <Typography variant='h6'>First Item</Typography>
  </Grid>
</Grid>

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