如何防止MUI多选Select组件宽度随选项选择自动扩展？

云原生阿岚

2026-8-21

问题

使用MUI带multiple属性的Select组件实现多选功能，通过Grid布局让所有子元素宽度均分（1fr），但选择多个选项时，Input元素会不断扩展，无法保持与同级元素宽度一致。代码如下：

<Grid container>
  <Grid xs item>
    Filter By Site
  </Grid>
  <Grid xs item>
    Filter By Group
  </Grid>
  <Grid xs item>
    Filter By Cams
  </Grid>
  <Grid item xs>
    <FormControl>
      <InputLabel id="demo-multiple-name-label">Name</InputLabel>
      <Select
        labelId="demo-multiple-name-label"
        id="demo-multiple-name"
        multiple
        value={personName}
        onChange={handleChange}
        input={<OutlinedInput label="Name" />}
        MenuProps={MenuProps}
      >
        {names.map((name) => (
          <MenuItem
            key={name}
            value={name}
            style={getStyles(name, personName, theme)}
          >
            {name}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  </Grid>
</Grid>

解决方案

要让多选Select始终保持Grid项的宽度，只需以下两步：

给<FormControl>添加fullWidth属性，让它完全填充所在的Grid容器宽度：

<FormControl fullWidth>

若多选标签过多导致内部溢出，给OutlinedInput添加样式允许标签自动换行，避免撑宽容器：

input={<OutlinedInput label="Name" sx={{ '& .MuiSelect-multiple': { flexWrap: 'wrap' } }} />}

修改后的完整代码示例：

<Grid container>
  <Grid xs item>
    Filter By Site
  </Grid>
  <Grid xs item>
    Filter By Group
  </Grid>
  <Grid xs item>
    Filter By Cams
  </Grid>
  <Grid item xs>
    <FormControl fullWidth>
      <InputLabel id="demo-multiple-name-label">Name</InputLabel>
      <Select
        labelId="demo-multiple-name-label"
        id="demo-multiple-name"
        multiple
        value={personName}
        onChange={handleChange}
        input={<OutlinedInput label="Name" sx={{ '& .MuiSelect-multiple': { flexWrap: 'wrap' } }} />}
        MenuProps={MenuProps}
      >
        {names.map((name) => (
          <MenuItem
            key={name}
            value={name}
            style={getStyles(name, personName, theme)}
          >
            {name}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  </Grid>
</Grid>

原理：fullWidth属性会让FormControl及其内部的Select、Input组件继承父Grid项的宽度，强制保持与同级元素一致；添加flexWrap: 'wrap'则让多选选中的标签自动换行，避免横向溢出撑宽容器。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung