React Material UI使用createTheme自定义主题后TextField无边框问题求助

问题根因 #

你的核心问题是 MUI跨版本API不兼容：

• createTheme从@mui/material/styles导入，属于MUI v5的API
• ThemeProvider却从@material-ui/core导入，属于MUI v4的API
  两个大版本的主题系统不互通，会导致组件默认样式无法正确注入，就出现了输入框边框消失的问题。

解决步骤 #

1. 首先修正ThemeProvider的导入路径，替换为MUI v5的正确来源：

// 两种导入方式都可以，选其中一种即可
import { ThemeProvider } from '@mui/material/styles';
// import { ThemeProvider } from '@mui/material';

2. 清理项目冗余依赖，避免v4和v5的包同时存在引发更多冲突：

# npm 卸载v4依赖
npm uninstall @material-ui/core @material-ui/icons
# yarn 卸载v4依赖
yarn remove @material-ui/core @material-ui/icons

3. 如果修改后仍有样式异常，可以在主题配置中显式声明输入框的默认样式作为兜底：

const theme = createTheme({
  // 保留你原有的palette、typography配置
  palette: {
    primary: { main: '#3f51b5' },
    secondary: { main: '#ff3d00' },
  },
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
  // 新增组件样式覆盖配置
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '& fieldset': {
            borderColor: 'rgba(0, 0, 0, 0.23)',
          },
          '&:hover fieldset': {
            borderColor: 'rgba(0, 0, 0, 0.87)',
          },
          '&.Mui-focused fieldset': {
            borderColor: '#3f51b5',
          }
        }
      }
    }
  }
});

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