MUI v5配置自定义主题后组件primary主色不生效，使用makeStyles时异常问题

问题根源 #

你当前使用的ThemeProvider是从@mui/styles导入的旧版本JSS专属Provider，仅能给makeStyles生成的自定义样式传递主题，无法将自定义主题注入到MUI v5原生组件的样式体系中。

修复方案（无需修改现有makeStyles代码） #

1. 调整全局Provider层级 #

修改项目入口文件（通常是index.js/index.tsx），按以下层级嵌套Provider：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { StyledEngineProvider, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import { ThemeProvider as LegacyThemeProvider } from '@mui/styles';
import theme from './Theme';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  {/* 配置注入顺序，避免JSS样式覆盖原生MUI组件样式 */}
  <StyledEngineProvider injectFirst>
    {/* MUI v5原生组件的主题Provider，负责给所有基础组件传自定义配置 */}
    <MuiThemeProvider theme={theme}>
      {/* 旧版JSS的主题Provider，兼容现有makeStyles/useStyles代码 */}
      <LegacyThemeProvider theme={theme}>
        <App />
      </LegacyThemeProvider>
    </MuiThemeProvider>
  </StyledEngineProvider>
);

2. 清理冗余Provider #

删除业务组件（比如你给出的SignUp.tsx）中单独嵌套的ThemeProvider，全局只需要在入口处套一次即可，原有makeStyles、useStyles的代码不需要做任何修改即可正常运行，自定义主题也会同时作用于原生MUI组件。

可选验证 #

修改完成后可以直接测试Button组件的primary颜色是否已经变成你配置的#34b711，原有自定义样式的优先级也不会受影响。

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