Chrome下MUI Grid内TextField挤压（仅md/lg断点复现）

问题表现 #

• 基于MUI开发的Dialog模态框功能整体正常，仅Chrome浏览器下出现Grid容器内TextField挤压堆叠的样式异常
• 异常仅在窗口尺寸匹配md、lg响应式断点时触发，Safari浏览器、CodeSandbox在线编辑器环境下无法复现
• 效果对比：
  • Safari正常渲染效果：
  • Chrome异常渲染效果：

核心复现代码 #

return (
  <Dialog open={true}>
    <DialogTitle>Edit Dates</DialogTitle>
    <DialogContent>
      <Grid container spacing={2}>
        <Grid xs={12} sm={12} md={12} lg={12}>
          <DialogContentText>
            Please enter the new dates for Cover Crop Planting, Biomass Harvest, Cover Crop
            Termination, and Cash Planting in the text fields below. If you need to change a bag
            pickup timing, leave a comment.
          </DialogContentText>
        </Grid>
        <Grid item xs={12} sm={6} md={3} lg={3}>
          <TextField
            color="primary"
            type="date"
            id="Cover Crop Planting"
            label="Cover Crop Planting"
            variant="outlined"
            InputLabelProps={{ shrink: true }}
          />
        </Grid>
        <Grid item xs={12} sm={6} md={3} lg={3}>
          <TextField
            color="primary"
            type="date"
            id="Biomass Harvest"
            label="Biomass Harvest"
            variant="outlined"
            InputLabelProps={{ shrink: true }}
          />
        </Grid>
        <Grid item xs={12} sm={6} md={3} lg={3}>
          <TextField
            color="primary"
            type="date"
            id="Cover Crop Termination"
            label="Cover Crop Temination"
            variant="outlined"
            InputLabelProps={{ shrink: true }}
          />
        </Grid>
        <Grid item xs={12} sm={6} md={3} lg={3}>
          <TextField
            color="primary"
            type="date"
            id="Cash Planting"
            label="Cash Planting"
            variant="outlined"
            InputLabelProps={{ shrink: true }}
          />
        </Grid>
        <Grid item xs={6} sm={6} md={6} lg={6}>
          <Button
            color="primary"
            variant="contained"
            fullWidth={true}
          >
            Cancel
          </Button>
        </Grid>
        <Grid item xs={6} sm={6} md={6} lg={6}>
          <Button
            color="primary"
            variant="contained"
            fullWidth={true}
          >
            Update
          </Button>
        </Grid>
      </Grid>
    </DialogContent>
  </Dialog>
);

问题根因 #

1. 代码中首个占满整行的Grid子项缺失item属性，破坏了Grid容器的flex布局计算逻辑，导致后续子项宽度分配基准异常
2. Chrome浏览器对flex子项默认应用min-width: auto规则，当子项内的原生date类型输入框固有宽度计算值大于Grid item设置的百分比宽度时，会撑破父容器宽度约束；Safari对该规则的解析逻辑存在差异，因此不会触发该问题
3. md、lg断点下4个TextField同排排列，每个item仅占25%宽度，空间刚好达到宽度溢出阈值；小断点下组件自动换行为单列/双列排列，空间充足不会触发挤压

修复方案 #

按优先级依次操作即可解决问题：

• 补全首个Grid子项缺失的item属性，修正布局结构：

<Grid item xs={12} sm={12} md={12} lg={12}>
  <DialogContentText>
    Please enter the new dates for Cover Crop Planting, Biomass Harvest, Cover Crop
    Termination, and Cash Planting in the text fields below. If you need to change a bag
    pickup timing, leave a comment.
  </DialogContentText>
</Grid>

• 给所有包裹TextField的Grid item添加sx={{ minWidth: 0 }}属性，重置flex子项默认最小宽度规则，让Grid设置的百分比宽度优先生效，避免被子元素撑破：

<Grid item xs={12} sm={6} md={3} lg={3} sx={{ minWidth: 0 }}>
  {/* 内部TextField代码保持不变 */}
</Grid>

• （可选）给所有TextField组件添加fullWidth属性，强制输入框撑满父容器可用宽度，消除原生date输入框默认宽度对布局的干扰：

<TextField
  fullWidth
  color="primary"
  type="date"
  // 其余属性保持不变
/>

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