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

Question

我需要添加一个位置图标来反应 Material-UI

Select

选项。但没有选项...我在 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>
    );
  }}
  {...}
>

现场演示

Answer 2

您可以使用Material-UI的自动完成组件。它的行为很像 Select，并提供一个事件，允许您指定每个选项的布局。在这里查看相关文档：

https://mui.com/material-ui/react-autocomplete/#country-select