如何使Material UI Grid子元素占据单元格剩余宽度？

最简单方案：用TextField原生的fullWidth属性 #

Material UI的TextField自带fullWidth属性，开启后会自动占满父容器宽度，这是最直接的解决方式：

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField
      label="User Name"
      variant="outlined"
      fullWidth // 启用该属性即可让TextField占满单元格宽度
    />
  </Grid>
</Grid>

自定义布局方案：Flex布局配合flexGrow #

如果fullWidth不生效（比如同一Grid item里还有其他元素），可以通过Flex布局分配空间：

1. 给Grid item设置display: flex
2. 给TextField添加flexGrow: 1样式，让它占据剩余空间

示例代码：

<Grid container spacing={2}>
  <Grid item xs={12} sm={6} style={{ display: 'flex', gap: 16 }}>
    <TextField
      label="User Name"
      variant="outlined"
      style={{ flexGrow: 1 }} // 占满单元格剩余空间
    />
    <Button variant="contained">确认</Button>
  </Grid>
</Grid>

常见排查点 #

• 确保父级Grid正确设置了container属性，否则Grid item无法按预期网格布局排列
• 检查Grid item内是否有固定宽度元素挤占空间，调整元素的flex属性分配宽度
• 如果用Box等容器包裹TextField，需给容器也设置width: 100%或flexGrow: 1，避免容器限制TextField宽度

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