使用MUI v5和Next.js调用palette时出现服务器错误求助

问题根源 #

1. @mui/styles是Material UI v5的遗留样式方案，不会自动注入主题上下文，若未正确配置ThemeProvider，样式函数无法获取到theme对象，导致palette为undefined。
2. 你的useStyles定义方式错误，没有用makeStyles正确包裹样式生成逻辑。

修复步骤 #

1. 修正样式钩子定义 #

把样式函数传入makeStyles生成可用的钩子，在组件内调用时会自动接收主题参数：

import { Theme } from '@mui/material';
import { makeStyles } from '@mui/styles';

// 正确创建useStyles钩子
const useStyles = makeStyles((theme: Theme) => ({
  root: {
    backgroundColor: theme.palette.common.white,
  },
}));

// 组件内使用
export default function MyComponent() {
  const classes = useStyles();
  return <div className={classes.root}>页面内容</div>;
}

2. 全局配置ThemeProvider #

在Next.js的_app.tsx（或_app.jsx）中添加主题提供者，确保所有组件能访问到主题：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// 可自定义主题，也直接用默认主题
const theme = createTheme();

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

3. 处理SSR场景的样式兼容 #

如果用了Next.js的服务端渲染（静态生成/SSG、服务端渲染/SSR），需要在_document.tsx中配置服务端样式收集，避免样式闪烁或主题错误：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@mui/styles';
import { createTheme } from '@mui/material/styles';

const theme = createTheme();

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
      });

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
    };
  }

  render() {
    return (
      <Html lang="zh-CN">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

更优替代方案：使用MUI v5推荐的样式方案 #

@mui/styles是遗留方案，推荐用官方主推的styled组件或sx属性，避免SSR和主题注入问题：

用styled组件 #

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';

const StyledBox = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.common.white,
}));

export default function MyComponent() {
  return <StyledBox>页面内容</StyledBox>;
}

用sx属性 #

import Box from '@mui/material/Box';

export default function MyComponent() {
  return <Box sx={{ backgroundColor: (theme) => theme.palette.common.white }}>页面内容</Box>;
}

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