修复Material UI Dialog内TextField宽度不足、间距不均的布局问题

问题原因说明 #

1. 元素无法占满宽度：TextField组件默认不会占满父容器宽度，你之前Grid不生效大概率是缺失container、item必填属性，不符合MUI Grid的嵌套规则。
2. 同行元素无法均匀分布加间距：需要通过Grid的spacing属性控制间距，通过给Grid item设置宽度占比实现均匀分布。

修改步骤 #

• 给所有TextField添加fullWidth属性，让输入框自动占满父容器可用宽度
• 严格按照规则使用Grid布局：外层包裹带container属性的Grid，每个输入框外层包裹带item属性的Grid，通过配置item的宽度属性实现响应式布局
• 移除多余的autoFocus属性，同一页面多个元素加autoFocus只会最后一个生效

完整修改后的DialogContent代码 #

<DialogContent>
  <DialogContentText>
    Introduzca los valores necesarios para el cálculo del valor de huella
    hídrica
  </DialogContentText>
  {/* container是Grid容器必填属性，spacing控制子项间距，数值可自行调整 */}
  <Grid container spacing={2} sx={{ marginTop: 1 }}>
    {/* 此处配置为小于600px宽度时堆叠显示，大于等于600px时一行显示2个，若要4个全部同屏显示，可改为xs={3} */}
    <Grid item xs={12} sm={6}>
      <TextField
        onChange={(e) => setCoefTransp(e.target.value)}
        autoFocus
        label="Coeficiente de Transporte"
        type="number"
        value={coef_transp}
        fullWidth
      />
    </Grid>
    <Grid item xs={12} sm={6}>
      <TextField
        onChange={(e) => setCoefComer(e.target.value)}
        label="Coeficiente de Comercialización"
        type="number"
        value={coef_comer}
        fullWidth
      />
    </Grid>
    <Grid item xs={12} sm={6}>
      <TextField
        onChange={(e) => setKm(e.target.value)}
        label="Kilómetros"
        type="number"
        value={km}
        fullWidth
      />
    </Grid>
    <Grid item xs={12} sm={6}>
      <TextField
        onChange={(e) => setProd(e.target.value)}
        label="Producción"
        type="number"
        value={prod}
        fullWidth
      />
    </Grid>
  </Grid>
</DialogContent>

如果需要4个输入框完全在同一行展示，只需要把每个Grid item的属性替换为xs={3}即可。

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