如何让MUI Select选中项与MenuItem展示样式不同

需要将MUI Select的选中项展示样式与下拉MenuItem的样式分离。当前选中值时，Select会显示带有按钮的布局，点击Select时的下拉列表展示正常。我需要修改选中状态的默认展示，仅显示纯文本标签，不显示按钮，现有代码如下，期望仅显示名称的效果，但暂未找到解决方案。

现有代码 #

<FormControl ...>
        <InputLabel htmlFor = "select-device-group">
            Device Group
        </InputLabel>
        <Select
            value = {props.deviceGroup.selected} label={props.deviceGroup.selected.name}
            onChange = {props.selectDeviceGroup}
            input = {<Input id = "select-device-group"/>}>
            {props.deviceGroup.types.map(device => {
                return <MenuItem key = {device.id} value = {device} component='div'>
                    <div className='container p-0'>
                        <div className='row'>
                            <div className='col align-self-center'>
                        {device.name}
                            </div>
                            <div className='col'>
                    <a
                        title = {device.name}
                        onClick = {...}
                    >
            <span ...>
              <SVG .../>
            </span>
                    </a>
                            </div>
                        </div>
                    </div>
                </MenuItem>
            })}
        </Select>
        <FormHelperText>{props.deviceGroup.validationMessage}</FormHelperText>
    </FormControl>

方法一：用renderValue自定义选中项展示 #

MUI的Select组件自带renderValue属性，能完全自定义选中值的渲染内容，和下拉MenuItem的结构彻底分开：

<Select
    value={props.deviceGroup.selected}
    label={props.deviceGroup.selected.name}
    onChange={props.selectDeviceGroup}
    input={<Input id="select-device-group"/>}
    // 自定义选中项仅显示名称
    renderValue={(selected) => selected?.name || ''}
>
    {/* 原MenuItem代码保持不变 */}
    {props.deviceGroup.types.map(device => {
        return <MenuItem key={device.id} value={device} component='div'>
            <div className='container p-0'>
                <div className='row'>
                    <div className='col align-self-center'>
                        {device.name}
                    </div>
                    <div className='col'>
                        <a
                            title={device.name}
                            onClick={...}
                        >
                            <span ...>
                                <SVG .../>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </MenuItem>
    })}
</Select>

这个方法最直接，renderValue接收当前选中的value，直接返回要显示的纯文本即可，完全不影响下拉列表里的MenuItem结构。

方法二：通过CSS隐藏默认按钮样式（不推荐） #

如果不想用renderValue，也可以通过自定义CSS覆盖默认的Select按钮样式，隐藏按钮相关元素：

/* 隐藏Select默认的下划线 */
#select-device-group.MuiInput-root::after,
#select-device-group.MuiInput-root::before {
    display: none;
}
/* 去掉输入框边框和内边距 */
#select-device-group.MuiInput-root {
    border: none;
    padding: 0;
}
/* 隐藏下拉箭头图标 */
.MuiSelect-icon {
    display: none;
}

但这种方法容易受MUI版本更新影响，且无法灵活控制选中内容的结构，优先推荐方法一。

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