为何Material-UI Grid中两个TextField无法占父容器50%宽度？

问题原因分析 #

你使用的是Material-UI v5的Grid2组件，代码结构整体正确，但TextField未填满Grid item的宽度，可能是以下原因：

• 外层Box使用100vw作为宽度，当页面存在滚动条时，会导致容器宽度超出实际可用空间，间接影响Grid布局的计算
• Grid item的默认布局未让子元素（TextField）充分填充可用宽度

修复方案 #

方案1：调整Box的宽度属性 #

将外层Box的width: "100vw"改为width: "100%"，避免视口宽度导致的布局异常：

import React, { useState } from "react";
import { Box, TextField } from "@mui/material";
import Grid from "@mui/material/Grid2";

const AddQualificationForm = () => {
  const [qualification, setQualification] = useState({
    specialization: "",
    licenseNumber: "",
  });

  return (
    <Box sx={{ width: "100%", padding: 2, border: "2px solid blue" }}>
      <Grid container spacing={2} sx={{ border: "2px dashed black", width: '100%' }}>
        <Grid
          item
          xs={12}
          sm={6}
          sx={{ border: "2px solid red" }}
        >
          <TextField label="First Name" fullWidth />
        </Grid>
        <Grid
          item
          xs={12}
          sm={6}
          sx={{ border: "2px solid green" }}
        >
          <TextField label="Last Name" fullWidth />
        </Grid>
      </Grid>
    </Box>
  );
};

export default AddQualificationForm;

方案2：为Grid item添加flex布局 #

如果方案1无效，给Grid item添加display: "flex"，强制子元素填充可用宽度：

<Grid
  item
  xs={12}
  sm={6}
  sx={{ border: "2px solid red", display: "flex" }}
>
  <TextField label="First Name" fullWidth />
</Grid>

方案3：强制TextField宽度100% #

通过sx属性直接设置TextField的宽度为100%，确保覆盖默认样式：

<TextField label="First Name" fullWidth sx={{ width: "100%" }} />

验证效果 #

修复后，屏幕宽度大于sm断点（默认600px）时，两个TextField会各占父容器的50%宽度；小屏幕上会自动堆叠成单列，符合响应式需求。

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