ThemeProvider未注入主题，如何让组件通过props接收主题？

问题背景 #

我通过@mui/material/styles的createTheme创建了深色主题：

export const darkTheme = createTheme({
  palette: {
    mode: "dark",
    primary: {
      main: "#12284c",
    },
  },
});

并在App组件中通过ThemeProvider注入主题，但子组件（如Home）无法通过props获取到theme（打印结果为undefined），仅能通过useTheme() Hook访问。希望实现全应用组件都能直接通过props接收主题。

核心原因 #

ThemeProvider是基于React Context机制传递主题的，不会自动将主题注入组件的props中，所以组件默认无法通过props拿到主题，而useTheme()本质是从Context中读取主题数据。

解决方案 #

1. 使用MUI内置的withTheme高阶组件 #

MUI官方已经封装好了withTheme高阶组件，能自动将Context中的主题注入组件props，这是最便捷的方案：

组件改造示例：

import { withTheme } from '@mui/material/styles';

const Home = ({ theme }) => {
  console.log("🚀 ~ Home ~ theme:", theme);
  return <div>Home</div>;
};

// 用withTheme包裹组件后导出
export default withTheme(Home);

改造后，Home组件的props中会自动带上theme属性，无需手动传递。所有需要接收主题的组件都可以用这种方式处理。

2. 自定义高阶组件（需扩展逻辑时用） #

如果需要在注入主题时添加自定义逻辑（比如修改主题参数），可以自己实现一个HOC：

import { useTheme } from '@mui/material/styles';

const withTheme = (Component) => {
  return (props) => {
    const theme = useTheme();
    // 这里可以添加自定义处理逻辑，比如扩展主题属性
    const extendedTheme = { ...theme, customProp: 'xxx' };
    return <Component {...props} theme={extendedTheme} />;
  };
};

export default withTheme;

使用方式和内置withTheme完全一致，用它包裹目标组件即可。

3. 手动传递主题（适合少量组件场景） #

如果仅少数组件需要主题，可以在父组件中通过useTheme()获取后，手动传递给子组件（路由场景下可用Outlet传递上下文）：

// MainLayout组件中传递主题
import { useTheme } from '@mui/material/styles';
import { Outlet } from 'react-router-dom';

const MainLayout = () => {
  const theme = useTheme();
  return <Outlet context={theme} />;
};

// Home组件中接收主题
import { useOutletContext } from 'react-router-dom';

const Home = () => {
  const theme = useOutletContext();
  console.log("🚀 ~ Home ~ theme:", theme);
  return <div>Home</div>;
};

这种方式适合局部场景，但组件较多时会导致重复代码，不推荐全局使用。

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