时间戳

首页 > 解决方案 > 如何向 Material-UI Select 添加图标？

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

问题描述

我需要添加一个位置图标来响应 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>

标签： reactjsangular-materialmaterial-uimaterial-design

解决方案

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

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

现场演示

Codesandbox 演示

推荐阅读