如何通过sx props禁用MUI Autocomplete组件的动画效果

直接在Autocomplete组件上配置sx属性，定向覆盖内部节点的动画、过渡样式即可，不需要修改全局主题、不需要引入额外CSS文件，可同时覆盖下拉列表展开/收起过渡、尾部三角图标状态变化动画两类效果。

完整可复用配置代码 #

<Autocomplete
  // 原有业务属性（options、value、onChange等）保持原有逻辑不变即可
  sx={{
    // 禁用下拉选项列表的展开、关闭过渡动画
    '& .MuiAutocomplete-popper': {
      transition: 'none !important',
      '& .MuiPaper-root': {
        transition: 'none !important',
        animation: 'none !important'
      }
    },
    // 禁用尾部endAdornment三角图标的状态切换、背景动画
    '& .MuiAutocomplete-endAdornment': {
      '& .MuiIconButton-root': {
        transition: 'none !important',
        // 不需要保留按钮hover背景就保留这行，需要可删除
        backgroundColor: 'transparent !important',
        '&:hover, &.Mui-focusVisible': {
          backgroundColor: 'transparent !important',
          transition: 'none !important'
        },
        '& .MuiSvgIcon-root': {
          transition: 'none !important',
          // 取消下拉展开时的图标旋转效果
          transform: 'none !important'
        }
      }
    }
  }}
  renderInput={(params) => <TextField {...params} label="选择选项" />}
/>

配置说明 #

• 下拉列表动画覆盖逻辑：Autocomplete的下拉弹出层基于Popper组件实现，内部承载选项的Paper容器默认绑定了淡入淡出、位移动画类，给对应节点强制设置transition: none和animation: none即可完全移除展开、关闭时的所有过渡效果。
• 尾部图标动画覆盖逻辑：输入框尾部的下拉三角图标默认带有两类动画：一是图标按钮hover、聚焦时的背景渐变过渡，二是下拉展开时图标旋转180度的transform过渡。上述配置会同时覆盖这两类效果，如果需要保留hover背景，只需要删除配置中backgroundColor: 'transparent !important'相关的两行即可。

如果你自定义了弹出层的容器组件、或者替换了默认的Paper组件，只需要将选择器中对应的MUI默认类名替换为你自定义组件的类名，配置即可正常生效。

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