React与Material UI适配版本咨询：useContext空值报错及安装方法

我遇到的问题与某Stack问题极为相似，现咨询：应当安装React和Material UI的哪些版本，以及如何安装？

测试代码 #

import * as React from 'react';
import {Button} from '@mui/material';

function App() {
  return (
    <div>
      <Button>hello</Button>
    </div>
  );
}

错误信息 #

ERROR
Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (http://localhost:3000/main.1060eb1d58db4786d492.hot-update.js:12575:25)
    at Button (http://localhost:3000/main.1060eb1d58db4786d492.hot-update.js:2470:59)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:21336:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:23907:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:25954:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10928:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10972:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11029:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:30903:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:30150:16)

当前package.json配置 #

{
  "name": "my-material-ui-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mui/icons-material": "^5.14.8",
    "@mui/material": "^5.14.8",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
    
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

解决方案 #

版本兼容性说明

Material UI 5.x 要求 React 17.0.0 及以上版本，React 18.x 完全兼容。你当前的版本组合理论上没问题，报错大概率是依赖缺失或重复解析导致的。

步骤1：修复依赖（优先尝试）

1. 卸载现有MUI相关包：

npm uninstall @mui/material @mui/icons-material

2. 重新安装MUI及必填的样式依赖：

npm install @mui/material@^5.14.8 @mui/icons-material@^5.14.8 @emotion/react@^11.11.1 @emotion/styled@^11.11.0

（Material UI 5默认使用Emotion作为样式引擎，缺失这些依赖会导致组件上下文初始化失败）

步骤2：降级版本（若修复无效）

如果上述操作后仍报错，可尝试降级React到17.x版本，确保和create-react-app 5.x的兼容性：

1. 卸载现有React包：

npm uninstall react react-dom

2. 安装React 17.x版本：

npm install react@^17.0.2 react-dom@^17.0.2

额外提示

create-react-app已停止维护，后续建议迁移到Vite等现代构建工具，避免类似依赖兼容问题。

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