切换浏览器标签后MUI TextField出现蓝色轮廓如何解决？

这个蓝色轮廓是浏览器默认的:focus-visible样式或MUI组件的focus状态边框导致的，以下是几种解决方式：

方式一：单个组件通过sx属性覆盖 #

直接在目标TextField组件上用sx属性自定义样式，精准控制该组件的focus状态：

<TextField
  sx={{
    // 去掉浏览器默认的focus-visible轮廓
    '&:focus-visible': {
      outline: 'none',
    },
    // 覆盖MUI内部的focus状态边框
    '& .MuiOutlinedInput-root:focus-within': {
      '&:before': { borderColor: 'transparent' },
      '&:after': { borderColor: 'transparent' },
    },
  }}
  label="输入框示例"
  variant="outlined"
/>

方式二：全局主题统一修改 #

通过MUI的ThemeProvider自定义主题，一次性修改所有TextField的focus样式：

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

const customTheme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '&:focus-visible': { outline: 'none' },
          '&:focus-within': {
            '&:before': { borderColor: 'transparent' },
            '&:after': { borderColor: 'transparent' },
          },
        },
      },
    },
  },
});

// 用ThemeProvider包裹应用
export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <TextField label="输入框示例" variant="outlined" />
    </ThemeProvider>
  );
}

方式三：全局CSS样式覆盖 #

如果项目使用全局样式表或CSS模块，可直接添加以下样式：

/* 全局样式文件 */
.MuiOutlinedInput-root:focus-within:before {
  border-color: transparent !important;
}

.MuiOutlinedInput-root:focus-within:after {
  border-color: transparent !important;
}

.MuiOutlinedInput-root:focus-visible {
  outline: none !important;
}

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