Next.js中如何结合Redux Toolkit与Material UI Theme Provider实现明暗模式

你遇到的错误根源是：当前代码把Redux的Provider放在ThemeProvider内部，而ThemeProvider或它的子组件（比如CssBaseline）需要访问Redux上下文，但这些组件不在Redux的上下文覆盖范围内，所以抛出找不到react-redux context的报错。

正确的处理方式是把Redux的Provider放在最外层，让ThemeProvider及其所有子组件都处于Redux的上下文环境中，这样所有需要访问Redux状态的组件都能正常获取上下文。

修正后的代码示例 #

import { Provider, useSelector } from 'react-redux';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import store from '../redux/store'; // 替换成你的store实际路径

function MyApp({ Component, pageProps }) {
  // 从Redux store中获取主题状态（假设你的theme slice里有currentTheme字段）
  const theme = useSelector(state => state.theme.currentTheme);

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

export default MyApp;

关键说明 #

• 确保theme的值从Redux store中动态获取，这样当你通过Redux修改明暗模式状态时，ThemeProvider能自动同步更新主题。
• 调整顺序后，所有依赖Redux的组件（包括ThemeProvider内部的组件）都能正常访问Redux上下文，不会再出现找不到context的错误。

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