Next.js项目中Material UI React自定义主题配置不生效如何解决

你当前项目同时安装了Material UI v4和v5两个版本的依赖，两套主题体系不兼容导致自定义主题不生效：

• @material-ui/core 是Material UI v4的核心包，你现在从该路径导入的createTheme、ThemeProvider都是v4版本的API
• @mui/material 是Material UI v5的核心包，你项目中使用的TextField、Button等组件都是从v5包导入的，v5组件无法识别v4的ThemeProvider注入的主题配置

你之前尝试的修改API名称、调整props名等操作都无法解决问题，因为核心冲突是版本不兼容，而非API调用错误。

步骤1：卸载冗余的v4依赖 #

执行命令卸载旧版本核心包：
npm uninstall @material-ui/core
如果还有其他@material-ui/开头的v4依赖也一并卸载，避免后续再出现版本冲突。

步骤2：修正主题相关API的导入路径 #

把app.js中主题相关的导入路径替换为v5的官方路径，修改后完整代码如下：

import Layout from '../components/layout'
import '../styles/global.css'
// 替换为v5的导入路径
import { createTheme, ThemeProvider, CssBaseline } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: '#00ab55',
    },
    secondary: {
      main: "#00ab55"
    }
  }
});

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      {/* 加入CssBaseline统一全局基础样式，也可以保证主题变量全局生效 */}
      <CssBaseline />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ThemeProvider>
  )
}

步骤3：验证组件导入路径 #

确认所有使用的MUI组件都是从@mui/material路径导入，不要使用@material-ui/core的导入语句，比如：

// 正确的v5导入方式
import TextField from '@mui/material/TextField'
import Button from '@mui/material/Button'

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