React-Redux环境导入MUI组件触发useContext读取null属性错误求助

问题场景 #

基础React-Redux项目未使用MUI组件时可正常渲染，自定义组件也能正常工作，但导入并使用任意MUI组件（如Box）后，立即抛出空值读取错误。

错误信息 #

TypeError: Cannot read properties of null (reading 'useContext')
at useContext (http://localhost:3000/static/js/bundle.js:63505:25)
at http://localhost:3000/static/js/bundle.js:60374:66
at renderWithHooks (http://localhost:3000/static/js/bundle.js:35774:22)
at updateForwardRef (http://localhost:3000/static/js/bundle.js:38343:24)
at beginWork (http://localhost:3000/static/js/bundle.js:40390:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:25370:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:25414:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:25471:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:45335:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:44583:16)

相关代码 #

初始可运行的App组件 #

import React from 'react';
import logo from './logo.svg';
import GoogleMapReact from 'google-map-react';
import { Counter } from './features/counter/Counter';
import './App.css';

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

import { NavBar } from './components/Navbar';

function App() {
  return (
    <>
    <div className="App">
        <Counter />
    </div>
    </>
  );
}

export default App;

添加MUI组件后触发错误的代码 #

return (
  <>
  <Box></Box>
  <div className="App">
    <Counter />
  </div>
  </>
);

package.json配置 #

{
  "private": true,
  "version": "0.1.0",
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.5",
    "@mui/material": "^5.15.4",
    "@mui/icons-material": "^5.15.4",
    "@fontsource/roboto": "^5.0.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.0",
    "react-scripts": "5.0.1",
    "google-map-react": "^2.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "peerDependencies": {
    "@mui/material": "^5.15.4",
    "@mui/icons-material": "^5.15.4",
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

问题原因 #

MUI核心组件依赖**主题上下文（ThemeContext）**获取样式配置、调色板等核心参数，所有MUI组件必须在ThemeProvider提供的上下文环境中使用。如果没有用ThemeProvider包裹应用根节点，MUI组件内部调用useContext(ThemeContext)时会返回null，从而触发该空值读取错误。

你的项目已正确安装MUI依赖，且React版本符合peerDependencies要求，因此问题核心是缺少ThemeProvider的包裹。

解决方法 #

在应用根层级（通常是index.js或App.js）使用ThemeProvider包裹整个应用：

方法1：在index.js中包裹（推荐） #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './app/store';
import App from './App';
// 导入MUI主题相关工具
import { ThemeProvider, createTheme } from '@mui/material/styles';
// 导入MUI默认字体（可选但推荐）
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

// 创建默认主题，可自定义配置
const theme = createTheme();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </Provider>
  </React.StrictMode>
);

方法2：在App组件中包裹 #

import React from 'react';
import logo from './logo.svg';
import GoogleMapReact from 'google-map-react';
import { Counter } from './features/counter/Counter';
import './App.css';

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

import { NavBar } from './components/Navbar';

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <>
        <Box></Box>
        <div className="App">
          <Counter />
        </div>
      </>
    </ThemeProvider>
  );
}

export default App;

完成修改后重启项目，MUI组件即可正常渲染。

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