删除自动完成下拉箭头
Remove Autocomplete Drop-Down Arrow
有没有办法从 material-ui 自动完成反应组件中删除下拉箭头图标?
这就是我现在的样子,我想去掉蓝色箭头,而是让文本在我输入时自动下拉。
您可以使用 Select
API documentation
中的 IconComponent
道具
尝试做这样的事情:
<Select IconComponent={undefined} ... />
原生道具freeSolo可能对你有帮助
<Autocomplete
id="free-solo-demo"
freeSolo
options={top100Films.map((option) => option.title)}
renderInput={(params) => (
<TextField {...params} label="Placeholder" margin="normal" variant="outlined" />
)}
/>
将 freeSolo
属性添加到 Autocomplete
使我们能够输入不在下拉选项中的值。
如果您只需要在输入中输入下拉列表中的值,我们可以通过覆盖 Autocomplete
组件的 CSS 属性 来实现这一点
const autocompleteStyles = AutocompleteStyles();
return (
<Autocomplete
classes={autocompleteStyles}
freeSolo
options={top100Films.map((option) => option.title)}
renderInput={(params) => (
<TextField {...params} label="Placeholder" margin="normal" variant="outlined" />
)}
/>
)
const AutocompleteStyles = makeStyles(theme => ({
endAdornment: {
display: 'none'
}
}))
请参阅此 material ui link 了解更多详情。 https://material-ui.com/api/autocomplete/
指定使用:<Select IconComponent={undefined} ... />
。但是,这对我不起作用。
相反 <Select IconComponent="none" ... />
有效,但它在 HTML 中给出了一个 <none>
标记并且浏览器给出了警告。
这对我有用,添加了道具“popupIcon”:
return (
<Autocomplete
freeSolo={false}
popupIcon={""}
...
/>
在 MUI v5 中,有一个干净的选项可以通过 forcePopupIcon
属性隐藏 Dropdown/PopUp 图标。
<Autocomplete
forcePopupIcon={false}
// other props...
/>
这比 freeSolo
选项好得多,因为它不会更改自动完成的行为。它还完全删除了 InputAdornment,而不是使用 CSS 解决方案将其隐藏。
有没有办法从 material-ui 自动完成反应组件中删除下拉箭头图标?
这就是我现在的样子,我想去掉蓝色箭头,而是让文本在我输入时自动下拉。
您可以使用 Select
API documentation
IconComponent
道具
尝试做这样的事情:
<Select IconComponent={undefined} ... />
原生道具freeSolo可能对你有帮助
<Autocomplete
id="free-solo-demo"
freeSolo
options={top100Films.map((option) => option.title)}
renderInput={(params) => (
<TextField {...params} label="Placeholder" margin="normal" variant="outlined" />
)}
/>
将 freeSolo
属性添加到 Autocomplete
使我们能够输入不在下拉选项中的值。
如果您只需要在输入中输入下拉列表中的值,我们可以通过覆盖 Autocomplete
组件的 CSS 属性 来实现这一点
const autocompleteStyles = AutocompleteStyles();
return (
<Autocomplete
classes={autocompleteStyles}
freeSolo
options={top100Films.map((option) => option.title)}
renderInput={(params) => (
<TextField {...params} label="Placeholder" margin="normal" variant="outlined" />
)}
/>
)
const AutocompleteStyles = makeStyles(theme => ({
endAdornment: {
display: 'none'
}
}))
请参阅此 material ui link 了解更多详情。 https://material-ui.com/api/autocomplete/
<Select IconComponent={undefined} ... />
。但是,这对我不起作用。
相反 <Select IconComponent="none" ... />
有效,但它在 HTML 中给出了一个 <none>
标记并且浏览器给出了警告。
这对我有用,添加了道具“popupIcon”:
return (
<Autocomplete
freeSolo={false}
popupIcon={""}
...
/>
在 MUI v5 中,有一个干净的选项可以通过 forcePopupIcon
属性隐藏 Dropdown/PopUp 图标。
<Autocomplete
forcePopupIcon={false}
// other props...
/>
这比 freeSolo
选项好得多,因为它不会更改自动完成的行为。它还完全删除了 InputAdornment,而不是使用 CSS 解决方案将其隐藏。