MUI 4迁移至5后theme的styleOverrides未正确覆盖默认样式求助

1. injectFirst 导致样式优先级反转 #

你设置的 <StyledEngineProvider injectFirst> 会让Emotion生成的自定义样式插入到<head>最前面，而MUI的全局基础样式（比如.MuiButtonBase-root这类全局类）以及来自@material-ui/pickers的JSS样式会加载在后面。CSS规则优先级相同时，后加载的样式会覆盖先加载的，这就是你设置的color: red被默认color: inherit覆盖的核心原因。而textTransform: none生效，是因为默认按钮的text-transform: uppercase定义在和你的自定义类优先级相同的组件类中，且你的样式规则刚好覆盖了默认值。

2. 混合MUI4与MUI5包引发冲突 #

你使用的@material-ui/pickers是MUI4的依赖包，基于JSS样式系统，而MUI5默认使用Emotion。两种样式系统的注入顺序加上injectFirst的设置，进一步打乱了样式优先级，加剧了自定义主题被默认样式覆盖的问题。

• 移除injectFirst属性：
  删掉<StyledEngineProvider>的injectFirst参数，让Emotion生成的自定义样式默认插入到MUI全局样式之后，确保自定义样式优先级高于默认全局类样式，color: red即可正常生效。修改后的外层组件代码：

  import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  import { MuiPickersUtilsProvider } from '@material-ui/pickers';
  
  export function App() {
      return (
          <StyledEngineProvider>
              <ThemeProvider theme={theme}>
                  <MuiPickersUtilsProvider utils={DayJS}>
                      <CssBaseline />
  
                      <Suspense fallback={<LoadingIndicator message="Loading..."/>}>
                          <AppCore/>
                      </Suspense>
                  </MuiPickersUtilsProvider>
              </ThemeProvider>
          </StyledEngineProvider>
      );
  }
  

• 替换MUI4日期选择器：
  将@material-ui/pickers替换为MUI5兼容的@mui/x-date-pickers，彻底消除跨版本包的样式冲突。安装命令：

  npm install @mui/x-date-pickers dayjs
  

  然后修改导入与组件使用：

  import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
  import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
  
  // 用以下代码替代原MuiPickersUtilsProvider
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    {/* 日期选择器组件 */}
    <DatePicker />
  </LocalizationProvider>
  

• 优化主题配置方式：
  尽量通过MUI的palette系统设置颜色，而非直接在styleOverrides中写固定值，这样能适配组件的样式继承逻辑，避免被inherit覆盖：

  export const theme = createTheme({
      palette: {
          mode: 'dark',
          primary: {
              main: 'red',
          },
          text: {
              primary: 'red',
          },
      },
      components: {
          MuiButtonBase: {
              styleOverrides: {
                  root: {
                      textTransform: 'none',
                  },
              },
          },
          MuiButton: {
              styleOverrides: {
                  root: {
                      textTransform: 'none',
                  },
              },
          },
          MuiInputBase: {
              styleOverrides: {
                  root: {
                      color: (theme) => theme.palette.text.primary,
                  }
              }
          },
      }
  });
  

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