MUI Select设置native属性后renderValue与自定义value不生效

MUI Select 组件添加native属性后，会直接渲染浏览器原生<select>元素，所有MUI上层封装的自定义渲染逻辑（包括renderValue）都会失效。原生select的展示值完全由当前选中的<option>标签内的文本决定，你传入的拼接格式自定义value匹配不到任何option的value属性，自然无法按预期展示。

方案1：保留native模式，用覆盖层实现自定义展示 #

如果必须用原生select避免下拉样式问题，不需要强行使用renderValue，通过覆盖层即可实现自定义展示效果：

• 将状态拆分为「原生select绑定的真实选中值」和「自定义展示文本」，不要给原生select传匹配不上option的自定义value
• 给Select外层的FormControl设置相对定位，新增一个绝对定位的展示层盖在Select输入区域上方，专门渲染拼接后的选中值、空状态占位符
• 将原生Select本身设置为全透明，宽高100%铺满容器，点击时依然触发原生下拉，不会影响交互

核心实现代码参考：

<FormControl sx={{ position: 'relative' }}>
  {/* 自定义展示层 */}
  <Box
    sx={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      padding: '0.5rem',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center'
    }}
  >
    {selectValue ? selectValue : <em>Nothing</em>}
  </Box>
  <Select
    native
    id="export-to-select"
    sx={{ borderRadius: "0px", width: '100%', height: '100%', opacity: 0 }}
    inputProps={{ sx: { padding: "0.5rem", width: '100%', height: '100%' } }}
    value={realSelectedValue}
    onChange={(e) => {
      const { selectedIndex, value } = e.target;
      const label = e.target.options[selectedIndex].parentElement.getAttribute("label");
      setSelectValue(`${label} - ${value}`);
      setRealSelectedValue(value);
    }}
    IconComponent={CustomSelectIcon}
    displayEmpty
  >
    <option aria-label="None" value="">Select target</option>
    {targetData.map(
      (target) => (
        <optgroup label={target.name} key={target.name}>
          {target.platforms.map((platform) => (
            <option key={platform.name} value={platform.name}>{platform.name}</option>
          ))}
        </optgroup>
      )
    )}
  </Select>
</FormControl>

方案2：关闭native属性，修复下拉样式（推荐） #

移除native属性后renderValue本身可以正常工作，你遇到的下拉样式错乱问题，本质是没有给MUI非原生Select的分组组件配置对应样式，不需要退回原生模式：

• 移除native属性，将原生<optgroup>替换为MUI的ListSubheader组件，<option>替换为MenuItem组件
• 通过MenuProps给下拉面板、分组标题、选项配置样式，完全对齐原生下拉的视觉效果
• 渲染MenuItem时直接把拼接后的值存在value属性中，不需要在onChange里操作DOM读label属性，逻辑更稳定

核心实现代码参考：

const [selectValue, setSelectValue] = useState(null);

const handleTargetDataChange = (event) => {
  setSelectValue(event.target.value);
}

<FormControl>
  <Select
    id="export-to-select"
    sx={{ borderRadius: "0px" }}
    inputProps={{ sx: { padding: "0.5rem" } }}
    value={selectValue}
    onChange={handleTargetDataChange}
    renderValue={(value) => (value ? value : <em>Nothing</em>)}
    IconComponent={CustomSelectIcon}
    displayEmpty
    MenuProps={{
      sx: {
        // 配置下拉面板样式和原生对齐
        '& .MuiListSubheader-root': {
          fontWeight: 700,
          lineHeight: '2rem',
          bgcolor: 'transparent'
        },
        '& .MuiMenuItem-root': {
          paddingLeft: '1.5rem'
        }
      }
    }}
  >
    <MenuItem disabled value="">
      <em>Select target</em>
    </MenuItem>
    {targetData.flatMap((target) => [
      <ListSubheader key={`group-${target.name}`}>{target.name}</ListSubheader>,
      ...target.platforms.map((platform) => (
        <MenuItem
          key={platform.name}
          value={`${target.name} - ${platform.name}`}
        >
          {platform.name}
        </MenuItem>
      ))
    ])}
  </Select>
</FormControl>

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