我怎样才能改变打开/关闭下拉列表的图标?
我希望功能保持不变。
当我尝试将它们添加为 endAdornment
时,删除和打开/关闭(箭头)图标的功能都消失了。
我只想添加一个新的箭头图标,而不是 Material-UI 的自定义图标。
return (
<div>
<Autocomplete
{...defaultProps}
className="contract-search"
onChange={(event, value) => {
handleOnChange(event, value);
}}
id="disable-close-on-select"
sx={{ width: 300 }}
renderInput={params => {
console.log(params);
return (
<TextField
{...params}
InputProps={{
...params.InputProps,
startAdornment: (
<span className="contract-search-icon">
<img src={`${ASSETS_BASE_URL}/icons/icon-search.svg`} alt="" />
</span>
),
}}
label="Vertrag suchen"
variant="standard"
/>
);
}}
/>
</div>
);
最佳答案
使用 popupIcon
属性,它接受一个 ReactNode。查看 Autocomplete
的完整 API here :
<Autocomplete popupIcon={<YourCustomIcon />}
现场演示
关于reactjs - Material-UI - 如何在自动完成中自定义下拉图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69437052/