使用MUI Button组件的startIcon/endIcon时触发useContext空值读取错误求助

问题概述 #

使用Material UI框架开发时，给Button组件配置startIcon/endIcon属性（引入@mui/icons-material中的图标）后，出现Cannot read properties of null (reading 'useContext')错误，移除图标属性后代码可正常运行，已安装@mui/material和@mui/icons-material依赖，但问题仍未解决。

报错代码 #

import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

export default function IconLabelButtons() {
  return (
    <>
      <Button variant="outlined" startIcon={<ShoppingCartIcon />} sx={{color:'grey'}}>
        Add To Cart
      </Button>
      <Button variant="contained" endIcon={<ShoppingCartIcon />} sx={{ color: 'white', backgroundColor:'grey' }}>
        Add To Cart
      </Button>
    </>
  );
}

完整错误信息 #

Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (http://localhost:3001/static/js/bundle.js:77496:25)
    at useDefaultProps (http://localhost:3001/static/js/bundle.js:70496:50)
    at useDefaultProps (http://localhost:3001/static/js/bundle.js:67954:91)
    at SvgIcon (http://localhost:3001/static/js/bundle.js:68093:96)
    at renderWithHooks (http://localhost:3001/static/js/bundle.js:42667:22)
    at updateForwardRef (http://localhost:3001/static/js/bundle.js:45916:24)
    at beginWork (http://localhost:3001/static/js/bundle.js:47977:20)
    at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/bundle.js:32923:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3001/static/js/bundle.js:32967:20)
    at invokeGuardedCallback (http://localhost:3001/static/js/bundle.js:33024:35)

可正常运行的代码（移除图标属性后） #

import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

export default function IconLabelButtons() {
  return (
    <>
      <Button variant="outlined" sx={{color:'grey'}}>
        Add To Cart
      </Button>
      <Button variant="contained" sx={{ color: 'white', backgroundColor:'grey' }}>
        Add To Cart
      </Button>
    </>
  );
}

解决方案 #

1. 同步@mui/material与@mui/icons-material版本 #

两个包版本不一致会导致图标组件无法正确获取MUI上下文，执行以下命令统一版本：

# npm
npm uninstall @mui/material @mui/icons-material && npm install @mui/material @mui/icons-material

# yarn
yarn remove @mui/material @mui/icons-material && yarn add @mui/material @mui/icons-material

2. 确保应用被ThemeProvider包裹 #

MUI组件（包括图标）需要在ThemeProvider提供的主题上下文中运行，在根组件中添加包裹：

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

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <IconLabelButtons />
    </ThemeProvider>
  );
}

export default App;

3. 检查React版本兼容性 #

MUI v5要求React版本≥17.0.0，查看package.json中的react和react-dom版本，若版本过低则升级：

npm install react@latest react-dom@latest
# 或指定兼容版本，如npm install react@18 react-dom@18

4. 清除缓存并重新安装依赖 #

开发环境缓存可能导致模块加载异常，执行以下操作：

# 清除node_modules和锁文件
rm -rf node_modules package-lock.json # Windows: rmdir /s node_modules && del package-lock.json
# 重新安装依赖
npm install
# 重启开发服务器
npm start

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