集成NextJS Layout后MUI Theme主题失效的原因是什么？

问题原因 #

MUI 的ThemeProvider基于 React Context 实现，上下文仅能向后代组件传递。你当前的写法将ThemeProvider包裹的整段内容作为参数传入getLayout，相当于布局组件本身处于ThemeProvider的外层，布局内使用的所有 MUI 组件都无法获取主题配置，最终导致样式失效。

修复方法 #

将ThemeProvider移动到组件最外层，把getLayout处理后的页面节点放到ThemeProvider内部，保证所有布局、页面组件都被主题上下文覆盖。
修正后的_app.js代码如下：

import * as React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../utils/theme'

export default function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout ?? ((page) => page)

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {getLayout(<Component {...pageProps} />)}
    </ThemeProvider>
  );
}

逻辑说明 #

• 错误写法的组件层级：自定义布局 -> ThemeProvider -> 页面内容，布局本身不在主题作用域内，布局内的MUI组件无法读取主题变量
• 修正后的组件层级：ThemeProvider -> 自定义布局 -> 页面内容，所有用到MUI的节点都在主题上下文覆盖范围内，样式可以正常生效
• 代码同时对MyApp的入参做了解构，直接获取Component和pageProps，避免props属性读取错误

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