如何配置MUI Select组件，使选中值显示与菜单项不同的内容？

一、仅显示文本（隐藏图标） #

有两种实用方案：

方案1：用renderValue自定义显示内容

这是最灵活的方式，直接通过Select的renderValue属性返回纯文本，完全绕过MenuItem里的图标结构：

<Select
  value={selectedIndex}
  onChange={(e) => handleSelection(e)}
  renderValue={(selected) => {
    // 根据选中值匹配对应文本
    if (selected === index1) return 'ItemText1';
    if (selected === index2) return 'ItemText2';
    return '';
  }}
>
  <MenuItem value={index1}>
    <CoolIcon /> ItemText1
  </MenuItem>
  <MenuItem value={index2}>
    <CoolIcon /> ItemText2
  </MenuItem>
</Select>

方案2：用CSS隐藏选中项的图标

如果不想改逻辑，直接通过样式隐藏选中状态下的图标：

/* 给Select添加className="custom-select"后，写如下样式 */
.custom-select .MuiSelect-select .CoolIcon {
  display: none;
}

二、修改选中值的文本内容 #

同样用renderValue属性，返回你想要的自定义文本即可，比如把原文本替换成新内容：

<Select
  value={selectedIndex}
  onChange={(e) => handleSelection(e)}
  renderValue={(selected) => {
    // 定义选中值与自定义文本的映射
    const textMap = {
      [index1]: '自定义文本1',
      [index2]: '自定义文本2'
    };
    return textMap[selected] || '';
  }}
>
  <MenuItem value={index1}>
    <CoolIcon /> ItemText1
  </MenuItem>
  <MenuItem value={index2}>
    <CoolIcon /> ItemText2
  </MenuItem>
</Select>

简单说，renderValue就是专门用来定制选中值显示的，不管是隐藏图标还是修改文本，都能靠它实现。

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