gpt4 book ai didi

reactjs - Material-UI - 如何在自动完成中自定义下拉图标?

转载 作者:行者123 更新时间:2023-12-05 01:57:10 34 4
gpt4 key购买 nike

我怎样才能改变打开/关闭下拉列表的图标?我希望功能保持不变。当我尝试将它们添加为 endAdornment 时,删除和打开/关闭(箭头)图标的功能都消失了。

我只想添加一个新的箭头图标,而不是 Material-UI 的自定义图标。

enter image description here

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 />}

现场演示

Codesandbox Demo

关于reactjs - Material-UI - 如何在自动完成中自定义下拉图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69437052/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com