Material-UI -如何在Autocomplete中自定义下拉图标？

在Material-UI中，要自定义Autocomplete组件中的下拉图标，可以通过使用renderOption属性来实现。renderOption属性允许我们自定义每个选项的渲染方式，包括图标。

下面是一个示例代码，展示了如何在Autocomplete中自定义下拉图标：

import React from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { TextField, ListItemIcon, ListItemText, Avatar } from '@material-ui/core';
import { Person as PersonIcon, LocationOn as LocationOnIcon } from '@material-ui/icons';

const options = [
  { label: 'John Doe', icon: <PersonIcon /> },
  { label: 'Jane Smith', icon: <PersonIcon /> },
  { label: 'New York', icon: <LocationOnIcon /> },
  { label: 'Los Angeles', icon: <LocationOnIcon /> },
];

const CustomOption = ({ label, icon }) => (
  <>
    <ListItemIcon>{icon}</ListItemIcon>
    <ListItemText primary={label} />
  </>
);

const CustomAutocomplete = () => (
  <Autocomplete
    options={options}
    getOptionLabel={(option) => option.label}
    renderOption={(option) => <CustomOption {...option} />}
    renderInput={(params) => <TextField {...params} label="Custom Autocomplete" />}
  />
);

export default CustomAutocomplete;

在上面的示例中，我们定义了一个options数组，其中每个选项都有一个label和一个对应的图标icon。然后，我们创建了一个名为CustomOption的组件，用于自定义每个选项的渲染方式。在CustomOption组件中，我们使用ListItemIcon和ListItemText来展示图标和标签。

最后，我们在CustomAutocomplete组件中使用Autocomplete组件，并通过renderOption属性将自定义的选项渲染方式应用到Autocomplete中。我们还使用renderInput属性来自定义输入框的样式。

这样，当用户在Autocomplete中输入内容时，下拉列表中的每个选项都会显示自定义的图标。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。