删除自动完成下拉箭头

Question

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

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

Answer 1

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

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

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

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

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

Answer 4

您可以使用Select API文档中的IconComponent道具

尝试做这样的事情：

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

Answer 5

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

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

Answer 6

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

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

这比freeSolo选项优越得多，因为它不会改变 AutoComplete 的行为。 它还完全删除了 InputAdornment，而不是使用 CSS 解决方案隐藏它。