React Grid组件问题：添加display属性后无法垂直居中内容

问题原因 #

你给绿色Grid设置display={{ xs: "none", sm: "block" }}时，覆盖了Grid容器默认的display: flex属性，导致flexDirection: "column"和justifyContent: "center"这些flex布局属性失效，自然没法实现垂直居中。

解决方案 #

方法1：用MUI Hidden组件实现响应式隐藏 #

直接用MUI的<Hidden>组件包裹绿色Grid，既不破坏Grid的flex容器特性，又能在xs屏幕下隐藏元素，同时保留垂直居中效果：

import Hidden from '@mui/material/Hidden';

<Grid item container>
    <Grid
      item
      container
      sx={{
        height: 100,
        bgcolor: "red"
      }}
      xs={6}
    >
      I am high
    </Grid>

    <Hidden xsDown>
      <Grid
        item
        container
        xs={6}
        sx={{
          bgcolor: "green",
          flexDirection: "column",
          justifyContent: "center"
        }}
      >
        Vertically center me
      </Grid>
    </Hidden>
</Grid>

方法2：保持Grid的flex布局特性 #

如果不想额外引入Hidden组件，只需把display属性的sm值改为flex（而非block），让Grid在sm及以上屏幕下依然保持flex容器特性，flex相关属性就能正常生效：

<Grid item container>
    <Grid
      item
      container
      sx={{
        height: 100,
        bgcolor: "red"
      }}
      xs={6}
    >
      I am high
    </Grid>

    <Grid
      item
      container
      xs={6}
      sx={{
        bgcolor: "green",
        flexDirection: "column",
        justifyContent: "center"
      }}
      display={{ xs: "none", sm: "flex" }} // 将block替换为flex
    >
      Vertically center me
    </Grid>
</Grid>

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