求助：如何移除MUI TextField hover时的白色边框

单组件直接覆盖样式 #

针对单个输入框，在OutlinedInput的sx属性里精准覆盖hover状态的边框样式，同时处理聚焦时的hover场景，避免边框变透明：

<OutlinedInput
  sx={{
    // 普通hover状态下，边框继承默认颜色（替换白色）
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: 'inherit',
    },
    // 聚焦状态下hover，保持聚焦的蓝色边框
    '&.Mui-focused:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: 'primary.main',
    }
  }}
  // 你的其他配置项
/>

全局主题统一配置（多组件适用） #

如果多个输入框需要去掉这个hover白色边框，用createTheme全局修改更高效：

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

const customTheme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: 'inherit',
          },
          '&.Mui-focused:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: 'primary.main',
          }
        }
      }
    }
  }
});

// 在根组件用ThemeProvider包裹整个应用
<ThemeProvider theme={customTheme}>
  {/* 你的应用内容 */}
</ThemeProvider>

关于Chrome检查找不到hover样式的说明 #

MUI的hover样式是通过类选择器组合生成的，检查时需要：

• 在Elements面板选中OutlinedInput对应的根元素
• 打开Styles面板的:hov选项，勾选hover状态
• 查找.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline选择器，它可能因为优先级问题被其他样式覆盖，而sx或styleOverrides的方式能确保自定义样式优先级足够高。

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