如何避免MUI Grid中的网格项出现重叠问题？

问题描述 #

使用MUI Grid组件创建布局，两个Grid Item内各包含一个TextField组件，预期小屏幕下文本框上下排列，大屏幕下并排显示，但在大屏幕的最小尺寸区间（如刚进入lg断点的屏幕宽度），文本框出现重叠现象。

代码示例 #

<Box component="form">
      <Grid container spacing={2}>
        <Grid item xs={12} md={4} lg={2}>
          <TextField
            variant="outlined"
            className={classes.input}
            value={targetRate}
            error={isErrTargetRate}
            helperText={helperTextTargetRate}
            onChange={event => {
              setTargetRate(event.target.value);
              setIsErrTargetRate(isNaN(event.target.value));
              setHelperTextTargetRate(
                isNaN(grindRate) ? numericHelperText : " "
              );
            }}
            label={"Target rate"}
            required
            InputProps={{
              inputProps: {
                className: classes.inputNumeric,
              },
              endAdornment: (
                <InputAdornment
                  position="end"
                  className={classes.inputAdornment}
                >
                  n/day
                </InputAdornment>
              ),
            }}
          />
        </Grid>

        <Grid item xs={12} md={4} lg={2}>
          <TextField
            variant="outlined"
            className={classes.input}
            value={time}
            error={isErrTime}
            helperText={helperTextTime}
            onChange={event => {
              setTime(event.target.value);
              setIsErrTime(isNaN(event.target.value));
              setHelperTextTime(isNaN(time) ? numericHelperText : " ");
            }}
            label={"time"}
            required
            InputProps={{
              inputProps: {
                className: classes.inputNumeric,
              },
              endAdornment: (
                <InputAdornment
                  position="end"
                  className={classes.inputAdornment}
                >
                  hrs
                </InputAdornment>
              ),
            }}
          />
        </Grid>
      </Grid>
 </Box>

解决方法 #

1. 调整Grid断点的宽度分配 #

当前lg={2}的设置让每个Grid Item在大屏幕下仅占2列（共12列），但刚进入lg断点的屏幕宽度（默认900px左右）下，2列的可用宽度可能小于TextField的最小宽度，导致挤压重叠。建议调整断点宽度值，保证容器宽度足够容纳TextField：

// 示例：md时各占6列（半宽），lg时各占3列（1/4宽）
<Grid item xs={12} md={6} lg={3}>
  {/* TextField组件 */}
</Grid>

2. 给TextField设置最小宽度 #

通过自定义样式强制TextField保持最小宽度，避免容器过窄时被挤压变形：

• 使用classes自定义样式：

// 在makeStyles或styled中定义
input: {
  minWidth: '220px', // 根据实际需求调整
},

• 直接使用sx属性快速设置：

<TextField
  sx={{ minWidth: 220 }}
  // 其他属性
/>

3. 优化响应式过渡逻辑 #

可以补充中间断点的布局规则，或者让lg断点在屏幕宽度接近下一级断点时自动降级布局，避免过渡区间的挤压。比如当屏幕宽度介于md和lg临界值时，保持md的布局规则，直到屏幕足够宽再切换到lg的并排布局。

4. 检查Grid的间距与换行设置 #

Grid的spacing会增加Item之间的间距，若容器总宽度不足，间距会进一步压缩Item的可用空间。可以适当减小spacing值，同时确保Grid容器开启自动换行（默认已开启，可显式声明确认）：

<Grid container spacing={1} wrap="wrap">
  {/* Grid items */}
</Grid>

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