使用MUI主题时'use client'的最佳实践及服务端组件适配疑问

可以通过两种方式避免添加'use client'指令，让组件维持服务端组件的特性：

1. 通过父组件传递主题样式值 #

让能访问主题的父组件（通常是客户端组件）提取所需的样式参数，传递给子组件。子组件无需使用useTheme钩子，仍可作为服务端组件：

父组件（客户端组件） #

"use client";
import { useTheme } from "@mui/material";
import CustomComp from "./CustomComp";

const ParentComponent = ({ data }) => {
  const theme = useTheme();
  return <CustomComp data={data} bgColor={theme.palette.customColor} />;
};

子组件（服务端组件） #

import { Box } from "@mui/material";

const CustomComp = ({ data, bgColor }) => {
  return (
    <Box height={100} width={100} sx={{ backgroundColor: bgColor }}>
      {data}
    </Box>
  );
};

export default CustomComp;

2. 直接导入静态主题对象 #

如果你的MUI主题是预先定义的静态对象（而非动态生成），可以直接在服务端组件中导入主题文件，无需依赖客户端钩子：

主题定义文件（theme.js） #

import { createTheme } from "@mui/material/styles";

export const appTheme = createTheme({
  palette: {
    customColor: "#1976D2",
  },
});

服务端组件 #

import { Box } from "@mui/material";
import { appTheme } from "./theme";

const CustomComp = ({ data }) => {
  return (
    <Box height={100} width={100} sx={{ backgroundColor: appTheme.palette.customColor }}>
      {data}
    </Box>
  );
};

export default CustomComp;

注意事项 #

• 如果主题是动态切换的（比如跟随用户深色/浅色模式偏好），直接导入静态主题的方式不适用，此时推荐使用父组件传递样式值的方案。
• 只有当组件需要直接使用客户端钩子（如useTheme、useMediaQuery）时，才必须添加'use client'转为客户端组件。

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