React Material UI 下拉菜单图标

Question

我正在尝试使用 Material UI (MUI) 自动完成 API (found here and here). Right now, I'm trying to change the arrow icon at the end of the textbox to the ExpandMore icon also from MUI (found here) 创建自定义下拉菜单。但是，我的代码不起作用。我真的很感激我能得到的任何帮助。

Answer 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" />}
    />
  );
}

React Material UI 下拉菜单图标

React Material UI Dropdown Menu Icon

icons

drop-down-menu

reactjs

material-ui