删除自动完成下拉箭头

Question

有没有办法从material-ui Autocomplete React组件中删除下拉箭头图标？

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

原生道具freeSolo可能会帮助你

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