reactjs - 如何不旋转 mui 自动完成弹出图标？

Question

打开自动完成输入后如何不旋转搜索图标？

<Autocomplete
  popupIcon={<Search />}
  onChange={(e, value) => handleFound(value)}
  options={['0', '2', '3', '1']}
  sx={{ width: '100%' }}
  renderInput={(params) =>
    <TextField {...params} placeholder={'type anything...'} />
  }
/>

Answer 1

您需要停止弹出指示器样式的旋转，如下所示:

<Autocomplete
  popupIcon={<Search />}
  onChange={(e, value) => handleFound(value)}
  options={["0", "2", "3", "1"]}
  sx={{
    width: "100%",
    "& .MuiAutocomplete-popupIndicator": { transform: "none" },
  }}
  renderInput={(params) => (
    <TextField {...params} placeholder={"type anything..."} />
  )}
/>

请注意，这不是唯一的解决方案，但在我看来是最快的......