如何向 Material-UI Select 添加图标？

Question

我需要添加一个位置图标来反应 Material-UISelect选项。但没有选项...我在 select 中阅读了 API 文档，但找不到相关选项。所以我真的需要你的帮助。非常感谢。

我找到了这样的代码。但无法正常工作。

<div id='location-box'>
  <Select>
    <MenuItem value="">
      <ListItemIcon>
        <LocationOnIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</div>

Answer 1

您可以覆盖renderValue回调以使用您想要的任何图标呈现所选文本。如果未选择任何选项，请记住设置displayEmpty为强制Select显示空值。作为参考，请参阅此处的 API 完整列表：

<Select
  displayEmpty
  renderValue={(value) => {
    return (
      <Box sx={{ display: "flex", gap: 1 }}>
        <SvgIcon color="primary">
          <LocationOnIcon />
        </SvgIcon>
        {value}
      </Box>
    );
  }}
  {...}
>

现场演示