如何修改Material UI Autocomplete输入框的右侧内边距？

默认配置下，MUI的outlined风格Autocomplete组件会给输入框设置65px的固定右侧内边距，直接写普通css选择器覆盖经常因为权重不足失效，以下是三种可直接生效的实现方式：

• 方案1：组件内置classes定向覆盖（稳定性最高）
  直接使用Autocomplete官方暴露的inputRoot样式钩子绑定自定义类名，不需要写复杂的层级选择器：

  <Autocomplete
    options={[]} // 替换为自身业务的选项数据
    classes={{
      inputRoot: 'custom-auto-complete-input'
    }}
    renderInput={(params) => <TextField {...params} label="选择项" />}
  />
  

  对应样式代码：

  .custom-auto-complete-input {
    padding-right: 50px !important;
  }
  

  *这里加!important是为了覆盖组件动态生成的内联样式，不会污染其他全局组件。

• 方案2：sx属性内联修改（适合单组件零散调整场景）
  不需要额外写css类，直接在renderInput的TextField上通过sx属性传样式，MUI的sx属性自带足够权重覆盖默认样式：

  <Autocomplete
    options={[]} // 替换为自身业务的选项数据
    renderInput={(params) => (
      <TextField
        {...params}
        label="选择项"
        sx={{
          '.MuiOutlinedInput-root': {
            paddingRight: '50px !important'
          }
        }}
      />
    )}
  />
  

• 方案3：全局主题统一覆写（适合全项目规范统一场景）
  如果项目内所有outlined风格Autocomplete都需要统一调整为50px右侧内边距，直接在MUI主题配置层修改默认规则即可，一处配置全量生效：

  import { createTheme } from '@mui/material/styles';
  
  const projectTheme = createTheme({
    components: {
      MuiAutocomplete: {
        styleOverrides: {
          inputRoot: {
            '&.MuiOutlinedInput-root': {
              paddingRight: 50
            }
          }
        }
      }
    }
  })
  

覆盖失效的核心原因：Autocomplete的右侧内边距是组件运行时动态计算后挂载到输入框根节点的样式，普通低权重css选择器优先级不足，只要使用官方提供的样式钩子、保证样式权重匹配即可生效，不需要深层嵌套写复杂选择器。

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