如何移除MUI OutlinedInput组件聚焦时的蓝色边框？

你当前的样式没生效是因为选择器层级写错了——聚焦时的蓝色线条不是来自input元素的outline，而是OutlinedInput外层的fieldset边框，以及组件本身的box-shadow。

直接修改sx属性就能解决，下面是两种实用方法：

方式一：针对单个组件修改 #

把你原来的sx替换成下面的代码，直接覆盖聚焦状态下的边框和阴影：

sx={{
  height: 32,
  mt: 1,
  // 移除聚焦时的阴影
  '&:focus': {
    boxShadow: 'none',
  },
  // 保持默认边框颜色，聚焦时也不变
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'rgba(0, 0, 0, 0.23)', // MUI默认边框色
  },
  '&:hover .MuiOutlinedInput-notchedOutline': {
    borderColor: 'rgba(0, 0, 0, 0.23)', // hover状态也保持默认（可选）
  },
  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
    borderColor: 'rgba(0, 0, 0, 0.23)', // 聚焦时边框和默认一致
  },
  // 保留你原来的input样式
  '.MuiInputBase-input': {
    outline: 'none !important',
  }
}}

如果想彻底隐藏边框，把borderColor改成transparent即可。

方式二：全局修改（多个组件需要时用） #

如果项目里多个OutlinedInput都要去掉聚焦蓝色线条，可以用createTheme全局配置：

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

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '&:focus': {
            boxShadow: 'none',
          },
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: 'rgba(0, 0, 0, 0.23)',
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: 'rgba(0, 0, 0, 0.23)',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: 'rgba(0, 0, 0, 0.23)',
          },
        },
      },
    },
  },
});

// 用ThemeProvider包裹你的应用
<ThemeProvider theme={theme}>
  {/* 你的应用组件 */}
</ThemeProvider>

修改后的完整组件代码 #

<OutlinedInput
  size="small"
  placeholder={`Search ${filter.name.toLowerCase()}`}
  value={searchTerm[filter.name] || ''}
  onChange={(e) => handleSearchChange(e, filter.name)}
  fullWidth
  sx={{
    height: 32,
    mt: 1,
    '&:focus': {
      boxShadow: 'none',
    },
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'rgba(0, 0, 0, 0.23)',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: 'rgba(0, 0, 0, 0.23)',
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: 'rgba(0, 0, 0, 0.23)',
    },
    '.MuiInputBase-input': {
      outline: 'none !important',
    }
  }}
  endAdornment={
    <InputAdornment position="end">
      <IconButton
        aria-label="clear filter"
        onClick={() => setSearchTerm(prev => ({ ...prev, [filter.name]: "" }))}
        edge="end"
        size="small"
      >
        <CloseIcon sx={{ fontSize: 20 }} />
      </IconButton>
    </InputAdornment>
  }
/>

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