如何自定义Material-UI NativeSelect下拉菜单样式，解决样式不生效及遮挡标签问题

问题1：修改下拉菜单背景色样式不生效 #

• 失效原因：Material-UI 的 Select 组件默认使用内置的 Popover + MenuItem 组件渲染下拉菜单，并没有使用原生的 <option> 标签，你写的针对 option 的样式选择器无法匹配到对应的元素，因此不会生效。
• 解决方法：通过 Select 组件的 MenuProps 属性配置下拉菜单的样式，直接匹配 MenuItem 类名修改背景色，示例代码如下：

<Select
  label="年龄"
  MenuProps={{
    sx: {
      "& .MuiMenuItem-root": {
        backgroundColor: "yellow",
        // 选中状态的背景色可以按需补充
        "&.Mui-selected": {
          backgroundColor: "orange"
        }
      }
    }
  }}
>
  <MenuItem value={10}>10</MenuItem>
  <MenuItem value={20}>20</MenuItem>
</Select>

问题2：下拉菜单遮挡上方标签 #

• 原因：默认下拉菜单的弹出锚点位置向上偏移，导致覆盖了上方的标签区域。
• 解决方法：修改 MenuProps 中的锚点位置和弹出偏移参数，让菜单从 Select 组件的底部开始渲染，就不会遮挡上方内容，示例代码如下：

<Select
  label="年龄"
  MenuProps={{
    // 配置锚点位置：水平对齐Select左侧，垂直对齐Select底部
    anchorOrigin: {
      vertical: "bottom",
      horizontal: "left"
    },
    // 配置菜单自身的对齐基准，和锚点匹配
    transformOrigin: {
      vertical: "top",
      horizontal: "left"
    },
    // 如果还需要额外的向下偏移，加以下配置
    PaperProps: {
      sx: {
        mt: 1 // 单位是Material-UI的间距，1=8px，按需调整数值即可
      }
    }
  }}
>
  {/* 选项内容 */}
</Select>

如果需要同时解决两个问题，把两个配置项合并到同一个 MenuProps 里即可。

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