React Material UI 下拉菜单图标

【问题标题】：React Material UI Dropdown Menu IconReact Material UI 下拉菜单图标
【发布时间】：2021-01-16 19:51:08
【问题描述】：

我正在尝试使用 Material UI (MUI) 自动完成 API（found here 和 here）创建自定义下拉菜单。现在，我正在尝试将文本框末尾的箭头图标更改为也来自 MUI（找到 here）的 ExpandMore 图标。但是，我的代码不起作用。在这方面我能得到任何帮助，我将不胜感激。

【问题讨论】：

标签： reactjs drop-down-menu material-ui icons

【解决方案1】：

在 Autocomplete API 中有 popupIcon 属性，用于在末尾更改图标。这是自定义的文档示例：

import TextField from '@material-ui/core/TextField';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

import Autocomplete from '@material-ui/lab/Autocomplete';

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      popupIcon={<ExpandMoreIcon/>}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
    />
  );
}

【讨论】：