如何移除Material UI Autocomplete组件hover时的黑色轮廓

这个黑色轮廓不是浏览器默认的outline效果，是Autocomplete嵌套的OutlinedInput组件内置的hover态fieldset边框样式，多数人排查不到对应规则是因为找错了DOM作用节点，常规加outline: none的方案完全不生效，可按以下方式解决：

局部单组件修改（推荐） #

通过MUI原生支持的sx属性精准命中内部样式节点，不会污染全局样式：

<Autocomplete
  // 保留你原本的所有组件配置，比如options、getOptionLabel等
  sx={{
    // 命中悬浮态的边框节点
    "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
      borderColor: "transparent", 
      // 不需要透明边框就替换为项目设计规范里的对应边框色值
    },
    // 若需要同步修改聚焦态的默认边框，可追加以下规则
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "your-design-border-color"
    }
  }}
  renderInput={(params) => <TextField {...params} label="选择项" />}
/>

全局样式统一覆盖 #

如果项目内所有Autocomplete、OutlinedInput组件都需要统一调整默认边框样式，直接在MUI主题配置中覆写默认规则即可，一次配置全项目生效：

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

const customTheme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "your-design-border-color",
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "your-design-border-color",
          }
        },
      },
    },
  },
});

// 用ThemeProvider包裹项目根组件传入customTheme即可

常见无效操作避坑 #

• 不要直接给Autocomplete根节点加outline: none，该属性无法作用到内部的fieldset边框元素
• 不建议用!important暴力提权覆盖，优先使用MUI官方提供的sx、主题覆写能力注入样式，避免出现样式优先级混乱
• 若你使用的是MUI v4版本，上述选择器规则依然生效，把sx替换为v4对应的makeStyles写法即可。

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