如何解决Material-UI Autocomplete组件endAdornment箭头与末尾字符间距过大问题

该问题源于Material-UI默认给Autocomplete的输入框设置了偏大的右侧内边距，用于预留下拉箭头的显示位置，最终呈现出内容末尾和箭头间距过大的视觉效果，可通过以下两种方案解决：

• 方案1：单组件局部调整
  仅修改当前使用的Autocomplete组件样式，不影响其他组件，代码示例如下：

<Autocomplete
  {...defaultProps}
  id="disable-close-on-select"
  disableCloseOnSelect
  renderInput={(params) => (
    <TextField
      {...params}
      label="disableCloseOnSelect"
      variant="standard"
      sx={{
        // 缩小输入框右侧内边距，默认值约为32px，可按需调整
        '& .MuiInputBase-input': {
          paddingRight: '18px !important'
        },
        // 可选：调整箭头与输入框的左侧间距，进一步缩小视觉间隙
        '& .MuiInputAdornment-positionEnd': {
          marginLeft: '4px'
        }
      }}
    />
  )}
/>

• 方案2：全局统一调整
  如果项目中所有同类型Autocomplete都需要调整该间距，可通过主题配置全局覆盖默认样式：

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

const customTheme = createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        inputRoot: {
          paddingRight: '18px !important',
          '& .MuiInputAdornment-positionEnd': {
            marginLeft: '4px'
          }
        }
      }
    }
  }
});

// 在应用入口将根组件包裹在ThemeProvider内即可生效
// <ThemeProvider theme={customTheme}>
//   <App />
// </ThemeProvider>

上述代码中的数值可根据实际设计规范灵活调整，16px-20px的右内边距适配大部分常规场景。

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