屏幕resize或切换移动端时React Material UI Grid布局重排方法

架构老林

2026-10-4

解决方案

核心问题梳理

<Chart> 组件未被包裹在 Grid item 容器内，无法参与MUI栅格系统的响应式规则计算
没有给图表区域和文本框区域配置正确的响应式栅格占比，小屏下没有指定图表占满整行的规则，自然无法触发换行
外层 Container 的自定义 display:flex 样式会和 Grid container 的默认flex布局冲突，干扰栅格正常排布

修改后的实现代码

组件结构

<Container className={classes.boxTest2} maxWidth="xl">
  <Grid container spacing={1}>
    {/* 给Chart包裹Grid item，配置响应式占比：xs断点<900px时占满12列整行，md及以上占6列 */}
    <Grid item xs={12} md={6} lg={6}>
      <Chart />
    </Grid>
    <Grid item xs={4} md={2} lg={2}>
      <Paper className={classes.paper}>
        some info
        <Typography className={classes.tempStyle} variant="h5">
          {round}&deg;C
        </Typography>
      </Paper>
    </Grid>
    <Grid item xs={4} md={2} lg={2}>
      <Paper className={classes.paper}>
        more info
      </Paper>
    </Grid>
    <Grid item xs={4} md={2} lg={2}>
      <Paper className={classes.paper}>
        even more info
      </Paper>
    </Grid>
  </Grid>
</Container>

样式调整

boxTest2: {
  // 删除原有的display:flex配置，避免和Grid布局冲突
},
tempStyle: {
  color: "red",
  marginTop: "20px",
  textAlign: "center"
},
paper: {
  height: 200,
  flex: 1,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  elevation: 8,
  maxWidth: "150px",
  // 可选：小屏下取消最大宽度限制，让文本框占满分配的栅格宽度
  [theme.breakpoints.down('md')]: {
    maxWidth: '100%'
  }
},