如何为MUI v5 Select组件设置默认显示值？

方案一：添加默认选项并设置初始值 #

1. 给selected.customEquipment设置初始默认值（以state初始化为例）：

   const [selected, setSelected] = useState({
     customEquipment: "请选择自定义设备"
   });
   

2. 在Select组件内添加默认选项，放在动态生成的选项之前：

   <StyledCustomDataSelect
        variant='outlined'
        labelId='demo-simple-select-standard-label'
        id='demo-simple-select-standard'
        name='selectCustomData'
        disabled={customEquipment?.length === 0}
        value={selected.customEquipment || "请选择自定义设备"}
        onChange={handleSelect}
        sx={{ width: 300, textAlign: 'start', margin: '10px' }}
      >
        <MyListSubheader>Custom Equipment</MyListSubheader>
        {/* 默认选项 */}
        <MenuItem value="请选择自定义设备" disabled>请选择自定义设备</MenuItem>
        {customData?.map((el, index) => el.type === 'customEquipment' && (
          <MenuItem key={index} value={el.name}>{el.name}</MenuItem>
        ))} 
    </StyledCustomDataSelect>
   

方案二：利用displayEmpty属性实现无额外选项的占位显示 #

如果不想添加额外选项，可通过displayEmpty属性配合空值MenuItem实现：

<StyledCustomDataSelect
     variant='outlined'
     labelId='demo-simple-select-standard-label'
     id='demo-simple-select-standard'
     name='selectCustomData'
     disabled={customEquipment?.length === 0}
     value={selected.customEquipment}
     onChange={handleSelect}
     displayEmpty
     sx={{ width: 300, textAlign: 'start', margin: '10px' }}
   >
     <MyListSubheader>Custom Equipment</MyListSubheader>
     {customData?.map((el, index) => el.type === 'customEquipment' && (
       <MenuItem key={index} value={el.name}>{el.name}</MenuItem>
     ))} 
     {/* 仅用于显示占位文本的隐藏选项 */}
     <MenuItem value="" disabled>请选择自定义设备</MenuItem>
 </StyledCustomDataSelect>

关键注意点 #

• 方案一中需保证selected.customEquipment的初始值与默认选项的value一致，或通过||兜底处理空值
• 方案二中displayEmpty属性必须配合value为空的MenuItem，才能在未选中时显示占位文本

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