如何阻止MUI Autocomplete弹出框图标（搜索图标）打开后旋转？

MUI的Autocomplete组件默认在弹出框展开时，会给popupIcon添加旋转180度的动画效果。要禁用这个效果，你可以通过以下两种方式实现：

方法一：通过SX样式覆盖默认动画 #

直接在Autocomplete的sx属性中，针对展开状态下的图标选择器覆盖旋转样式：

<Autocomplete
  popupIcon={<Search />}
  onChange={(e, value) => handleFound(value)}
  options={['0', '2', '3', '1']}
  sx={{
    width: '100%',
    // 覆盖展开状态下图标的旋转效果
    '& .MuiAutocomplete-popupIconOpen': {
      transform: 'none !important',
      // 可选：移除过渡动画，避免图标有晃动的过渡效果
      transition: 'none'
    }
  }}
  renderInput={(params) =>
    <TextField {...params} placeholder={'type anything...'} />
  }
/>

说明： #

• & .MuiAutocomplete-popupIconOpen是MUI为展开状态下的弹出框图标添加的类名，默认包含transform: rotate(180deg)的样式；
• transform: none !important强制覆盖默认的旋转效果，让图标保持初始状态；
• 加上transition: none可以彻底移除旋转的过渡动画，避免图标在展开/收起时有不必要的动效。

方法二：自定义PopupIcon组件（可选） #

如果需要更灵活的控制，也可以直接给自定义的图标组件添加样式，强制阻止旋转：

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

这种方式直接在图标组件上针对展开状态的类名设置样式，效果和方法一一致，适合需要单独定制图标样式的场景。

内容的提问来源于stack exchange，提问作者kamolmachine