如何覆盖AutoComplete组件的Style属性将marginTop设置为0

你之前的写法不生效有两个核心原因：

• 目标类名写错：你定义的是MuiFormControlLabel相关样式，和要修改的MuiInput-formControl完全不是同一个组件类
• 挂载位置错误：给Autocomplete组件的root根节点加样式，作用范围仅限Autocomplete最外层容器，无法命中内部嵌套的Input组件自带的MuiInput-formControl类

默认样式说明 #

当前MuiInput-formControl的内置默认样式为：

.MuiInput-formControl {
  margin-top: 16px;
}

你可以根据需求选择全局覆盖或者单组件局部覆盖的方案实现修改： #

方案1：全局覆盖（项目内所有用到该类的Input都会生效） #

根据你使用的MUI版本选择对应配置：

MUI v5 及以上版本

在主题配置的components.styleOverrides字段下指定对应规则：

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

const customTheme = createTheme({
  components: {
    MuiInput: {
      styleOverrides: {
        // 这里的formControl就对应.MuiInput-formControl类的样式槽
        formControl: {
          marginTop: 0,
        }
      }
    }
  }
})

之后把这个主题注入到项目根节点的ThemeProvider中即可。

MUI v4 及更早版本

老版本主题配置用overrides字段：

import { createMuiTheme } from '@material-ui/core/styles';

const customTheme = createMuiTheme({
  overrides: {
    MuiInput: {
      formControl: {
        marginTop: 0,
      }
    }
  }
})

方案2：局部覆盖（仅修改当前Autocomplete组件内的Input样式） #

不需要额外定义全局主题，直接通过sx属性嵌套选择器精准命中目标类即可，优先级足够覆盖默认样式，不需要加!important：

<Autocomplete
  disablePortal
  sx={{
    '& .MuiInput-formControl': {
      marginTop: 0
    }
  }}
  // 保留你原本的其他配置项，比如options、renderInput等
/>

如果你用的是makeStyles/useStyles的css-in-js写法，也可以把上面的选择器写到自定义样式类里，再通过className传给Autocomplete，效果完全一致。

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