Material UI v5 Autocomplete默认endAdornment样式异常求助

问题原因 #

Autocomplete组件默认的endAdornment元素被设置了top:unset的CSS属性，导致下拉箭头无法通过top:50%和transform: translateY(-50%)实现垂直居中，出现位置偏移。

解决方法 #

方法1：组件内局部覆盖样式 #

直接在Autocomplete渲染的TextField组件中，通过sx属性精准覆盖endAdornment的样式：

修改后的TextField代码示例：

<TextField
  {...props}
  label={`${translateFullContent(t, i18n, `ActionSelector.shiftGroup`)}`}
  variant="outlined"
  placeholder="Select a shift group"
  sx={{
    backgroundColor: "#fff",
    // 强制覆盖endAdornment的top属性
    '& .MuiAutocomplete-endAdornment': {
      top: '50% !important',
      transform: 'translateY(-50%)',
    },
  }}
/>

方法2：全局主题配置（适合多组件场景） #

如果项目中有多个Autocomplete组件需要修复这个问题，可以通过自定义Material UI主题全局修改样式：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        endAdornment: {
          top: '50%',
          transform: 'translateY(-50%)',
        },
      },
    },
  },
});

// 在应用根组件或目标组件外层包裹ThemeProvider
<ThemeProvider theme={customTheme}>
  {/* 你的Autocomplete组件所在区域 */}
</ThemeProvider>

方法3：排查全局样式冲突 #

检查项目中的全局CSS文件或第三方样式库，是否有针对.MuiAutocomplete-endAdornment类设置了top:unset，如果有直接删除或修改该样式规则即可。

修改后效果 #

通过上述方法覆盖top:unset后，endAdornment的下拉箭头会自动应用top:50%并垂直居中，恢复正常渲染效果。

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