如何在MUI Select组件中实现原生下拉菜单样式？

我需要让MUI Select组件看起来和原生下拉菜单一致，之前尝试将原生<select>标签包裹在FormControl组件中，虽然样式接近预期，但MUI Select的核心功能完全失效。以下是我当前的MUI Select代码和尝试过的原生select代码，求可行的解决方案。

当前MUI Select代码 #

<Box sx={{ width: 'calc(32.5% - 10px)' }}>
  <FormControl fullWidth >
    <InputLabel>Month</InputLabel>
    <Select
      id="demo-simple-select"
      value={month}
      label="Month"
      onChange={handleSelectMonth}
      sx={{
        "&:hover:not(.Mui-focused)": {
          "&&& fieldset": {
            borderColor: "#dadce0"
          },
        },
        ".MuiOutlinedInput-notchedOutline": {
          borderColor: '#dadce0',
        },
        '.MuiSvgIcon-root ': {
          fill: "#9e9e9e",
        }
      }}
    >
      <MenuItem className="select-dropdown-MenuItems" value="January">January</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="February">February</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="March">March</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="April">April</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="May">May</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="June">June</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="July">July</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="August">August</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="September">September</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="October">October</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="Novemeber">Novemeber</MenuItem>
      <MenuItem className="select-dropdown-MenuItems" value="December">December</MenuItem>
    </Select>
  </FormControl>
</Box>

尝试过的原生select代码（功能失效） #

<select
  class={`${errorCondition === 'incompleteBirthday' || errorCondition === 'isWrongFormat' ? 'error-third-adjust-1' : "input-third-adjust-1"} ${isMonthSelected ? 'select-selected' : 'select-color'}`}
  value={month}
  onChange={handleSelectMonth}
  onClick={handleMonthClick}
  onBlur={handleMonthBlur}
>
  <option value="" hidden>{month === '' ? monthPlaceholder : month}</option>
  <option className="select-dropdown-options" value="January">January</option>
  <option className="select-dropdown-options" value="February">February</option>
  <option className="select-dropdown-options" value="March">March</option>
  <option className="select-dropdown-options" value="April">April</option>
  <option className="select-dropdown-options" value="May">May</option>
  <option className="select-dropdown-options" value="June">June</option>
  <option className="select-dropdown-options" value="July">July</option>
  <option className="select-dropdown-options" value="August">August</option>
  <option className="select-dropdown-options" value="September">September</option>
  <option className="select-dropdown-options" value="October">October</option>
  <option className="select-dropdown-options" value="Novemeber">Novemeber</option>
  <option className="select-dropdown-options" value="December">December</option>
</select>

解决方案：使用MUI NativeSelect组件 #

直接用原生select套FormControl会导致MUI的表单功能失效，因为FormControl是为MUI的表单组件设计的。正确的做法是使用MUI提供的NativeSelect组件——它是原生<select>的封装，既能保留MUI表单体系的功能（比如标签浮动、错误状态绑定），又能呈现原生下拉菜单的外观。

修改后的代码示例 #

import { NativeSelect, FormHelperText } from '@mui/material';

<Box sx={{ width: 'calc(32.5% - 10px)' }}>
  <FormControl 
    fullWidth 
    error={errorCondition === 'incompleteBirthday' || errorCondition === 'isWrongFormat'}
  >
    <InputLabel>Month</InputLabel>
    <NativeSelect
      id="demo-native-select"
      value={month}
      label="Month"
      onChange={handleSelectMonth}
      onClick={handleMonthClick}
      onBlur={handleMonthBlur}
      sx={{
        // 自定义边框样式，匹配需求
        '&:hover:not(.Mui-focused) fieldset': {
          borderColor: '#dadce0',
        },
        '.MuiOutlinedInput-notchedOutline': {
          borderColor: '#dadce0',
        },
        // 匹配选中/未选中的文字颜色
        color: isMonthSelected ? 'inherit' : '#9e9e9e',
      }}
    >
      <option value="" hidden>{month === '' ? monthPlaceholder : month}</option>
      <option value="January">January</option>
      <option value="February">February</option>
      <option value="March">March</option>
      <option value="April">April</option>
      <option value="May">May</option>
      <option value="June">June</option>
      <option value="July">July</option>
      <option value="August">August</option>
      <option value="September">September</option>
      <option value="October">October</option>
      <option value="Novemeber">Novemeber</option>
      <option value="December">December</option>
    </NativeSelect>
    {/* 可选：添加错误提示文本 */}
    {(errorCondition === 'incompleteBirthday' || errorCondition === 'isWrongFormat') && (
      <FormHelperText>请选择有效的月份</FormHelperText>
    )}
  </FormControl>
</Box>

关键说明 #

1. NativeSelect的优势：它完全基于原生<select>实现，外观和原生下拉菜单一致，同时能和MUI的FormControl、InputLabel、FormHelperText等组件无缝配合，保留MUI的表单状态管理能力。
2. 错误状态处理：通过给FormControl添加error属性，可自动触发MUI的错误样式，配合FormHelperText展示错误提示，无需手动编写原生class。
3. 样式自定义：通过sx属性可以调整边框、文字颜色等细节，完全匹配需求样式，同时不破坏原生下拉的核心外观。

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