求助：MUI Select组件聚焦时标签无法适配出现重叠

问题描述 #

使用MUI的Select组件时，聚焦状态下标签会和下拉输入框重叠，效果如下：

解决方案 #

方案1：改用TextField包裹Select（推荐）

既然你使用TextField时无此问题，直接利用TextField的select属性实现下拉选择即可——它内部已处理好标签与输入框的位置适配逻辑，代码修改如下：

<TextField
  select
  label="Please select the reason for declining the request:"
  sx={{
    width: "100%",
    "& .MuiOutlinedInput-root.Mui-focused fieldset": {
      borderColor: "#a6a8a7",
    },
    "& .MuiInputLabel-root": {
      fontSize: "13px",
      "&.Mui-focused": {
        color: "black",
        fontSize: "14px",
      },
    },
  }}
>
  <MenuItem value={1}>Redirect to another person</MenuItem>
</TextField>

方案2：手动调整notchedOutline的缺口空间（保留原有组件结构）

如果坚持使用FormControl+InputLabel+Select的组合，可通过修改聚焦状态下notchedOutline的padding-left，给标签留出足够显示空间，数值可根据标签长度灵活调整：

<FormControl
  sx={{
    width: "100%",
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: "#a6a8a7",
        // 根据标签长度调整左侧内边距，确保标签不重叠
        paddingLeft: "16px",
      },
    },
  }}
>
  <InputLabel
    sx={{
      fontSize: "13px",
      "&.Mui-focused": {
        color: "black",
        fontSize: "14px",
      },
    }}
  >
    Please select the reason for declining the request:
  </InputLabel>
  <Select
    label="Please select the reason for declining the request:"
  >
    <MenuItem value={1}>Redirect to another person</MenuItem>
  </Select>
</FormControl>

关于之前调整无效的说明 #

你之前尝试设置width: auto对notchedOutline无效，是因为MUI的缺口宽度由内部计算的notchWidth参数控制，而非直接修改width属性。改用TextField或调整padding-left才能从根本上解决标签重叠问题。

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