Material UI Select组件被折叠 设置autoWidth属性未生效无法自动扩宽

问题表现 #

Material UI Select配置autoWidth后仍无法自动撑开宽度，效果如下：

错误点说明 #

你的代码存在3个影响宽度计算的问题：

• 外层FormControl默认是块级元素，宽度默认为100%，如果父容器存在宽度限制、或者布局规则限制了FormControl的自适应能力，会直接影响内部Select的宽度计算，autoWidth需要父容器本身允许自适应内容宽度才能生效。
• 你同时给Select声明了受控模式必须的value属性，和非受控模式才需要的defaultValue属性，二者属于冲突配置，受控模式下defaultValue不会生效，可能导致初始渲染时取值逻辑异常，影响宽度计算。
• 初始选中值为空字符串时，对应的<MenuItem value="" disabled>Prefix</MenuItem>是禁用状态，Select计算宽度时可能无法正确读取这个禁用项的内容宽度，导致初始渲染宽度过窄。

修正方案 #

修改后代码如下：

<FormControl 
  margin="dense"
  {/* 让FormControl先自适应内容宽度 */}
  sx={{ width: 'auto' }}
>
  <InputLabel id="prefix-label">Prefix</InputLabel>
  <Select
    autoWidth
    labelId="prefix-label"
    id="prefix"
    disabled={formPrefix.disabled}
    value={formPrefix.value ?? ""}
    error={formPrefix.invalid}
    {/* 删除冲突的defaultValue属性 */}
    label="Prefix"
    onChange={handlePrefix}
    {/* 加最小宽度兜底，避免初始状态过窄 */}
    sx={{ minWidth: 100 }}
  >
    <MenuItem value="" disabled>
      Prefix
    </MenuItem>
    <MenuItem value={"US"}>US +1</MenuItem>
    <MenuItem value={"else"}>Else</MenuItem>
  </Select>
  <FormHelperText></FormHelperText>
</FormControl>

修改后autoWidth就可以正常生效，选中不同选项时会自动适配内容宽度。

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