删除自动完成下拉箭头答案

【问题标题】：Remove Autocomplete Drop-Down Arrow删除自动完成下拉箭头
【发布时间】：2020-11-25 17:00:55
【问题描述】：

有没有办法从material-ui Autocomplete react组件中去掉下拉箭头图标？

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

【问题讨论】：

标签： javascript reactjs autocomplete material-ui

【解决方案1】：

原生道具freeSolo 可以帮到你

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

【讨论】：

freeSolo 也完全改变了行为。请参阅下面的答案，了解 API 提供的隐藏下拉图标/按钮的方法。

【解决方案2】：

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

而不是 <Select IconComponent="none" ... /> 工作，但它在 HTML 中给出了一个 <none> 标记并且浏览器给出了警告。

【讨论】：

只需使用 IconComponent="span" 或任何其他有效的 HTML 元素。没有箭头，没有警告。
谢谢，我已经做到了，而且成功了！
如果你使用打字稿，你应该在上面的评论中添加IconComponent="span"。如果您使用IconComponent="none" 或IconComponent={undefined}，则会出现错误TS2322: Type '"none"' is not assignable to type 'ElementType<any>'。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

将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'
    }
}))

有关更多详细信息，请参阅此材料 ui 链接。 https://material-ui.com/api/autocomplete/

【讨论】：

【解决方案5】：

您可以使用 Select API documentation 中的 IconComponent 属性

尝试做这样的事情：

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：