如何在Next.js服务端组件中使用MUI主题（无需'use client'）

要在服务端组件里直接用MUI主题，不用useTheme和'use client'，核心办法是直接导入你预先定义好的主题对象，而非通过客户端钩子获取。

步骤1：独立导出主题配置 #

先把MUI主题定义在单独的文件（比如src/theme.ts）里，确保它是纯静态导出，不依赖任何客户端API：

// src/theme.ts
import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  palette: {
    colors: {
      green: '#4caf50', // 你的自定义绿色
      // 其他自定义颜色
    },
    // 其他主题配置项
  },
});

步骤2：服务端组件直接调用主题 #

在服务端组件里直接导入这个主题对象，像用普通JS对象一样访问它的属性：

// 注意：这里没有'use client'，是纯服务端组件
import { Typography } from '@mui/material';
import { theme } from '../theme';

function TopRow() {
  return (
    <Typography color={theme.palette.colors.green}>
      2.2%
    </Typography>
  );
}

export default TopRow;

注意事项 #

• 这种方式只适合静态主题：如果你的主题需要根据用户偏好（比如深色模式）动态切换，那还是得用客户端组件配合useTheme或主题上下文，但静态主题完全可以在服务端渲染时直接使用。
• 务必保证主题文件没引入任何客户端专属API（比如window、document），否则会导致服务端渲染报错。

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