删除自动完成下拉箭头

Question

有没有办法从 material-ui 自动完成反应组件中删除下拉箭头图标？

这就是我现在的样子，我想去掉蓝色箭头，而是让文本在我输入时自动下拉。

Answer 1

您可以使用 Select API documentation

中的 IconComponent 道具

尝试做这样的事情：

<Select IconComponent={undefined} ... />

Answer 2

原生道具freeSolo可能对你有帮助

<Autocomplete
  id="free-solo-demo"
  freeSolo
  options={top100Films.map((option) => option.title)}
  renderInput={(params) => (
    <TextField {...params} label="Placeholder" margin="normal" variant="outlined" />
  )}
/>

Answer 3

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

Answer 4

指定使用：<Select IconComponent={undefined} ... />。但是，这对我不起作用。

相反 <Select IconComponent="none" ... /> 有效，但它在 HTML 中给出了一个 <none> 标记并且浏览器给出了警告。

Answer 5

这对我有用，添加了道具“popupIcon”：

return (
    <Autocomplete
      freeSolo={false}
      popupIcon={""}
      ...
    />

https://material-ui.com/api/autocomplete/

Answer 6

在 MUI v5 中，有一个干净的选项可以通过 forcePopupIcon 属性隐藏 Dropdown/PopUp 图标。

<Autocomplete
  forcePopupIcon={false}
  // other props...
/>

这比 freeSolo 选项好得多，因为它不会更改自动完成的行为。它还完全删除了 InputAdornment，而不是使用 CSS 解决方案将其隐藏。

删除自动完成下拉箭头

Remove Autocomplete Drop-Down Arrow

javascript

reactjs

autocomplete

material-ui