React项目使用MUI组件出现Uncaught TypeError报错求助

我在React项目中使用MUI框架，部分组件无法正常运行，出现Uncaught TypeError错误，麻烦帮忙排查解决。

错误截图：

我的代码如下：

import React from "react";
import { Grid, Container, Box, Button, Typography } from "@mui/material";
const BannerSlider = () => {
    return (
        <Grid container>
            <Grid item xs={12}>
                <Container maxWidth="xl" className="custom-slider" sx={{ padding: "0!important" }}>
                    <Box className="custom-slider-itemWrap">
                        <Box className="custom-slider-item">
                            <Grid container>
                                <Grid item lg={7}>
                                    <div className="custom-slider-newLabel">
                                        <Typography variant="body1">
                                            <span>New</span>Stay connected to the upcoming & Recent jobs
                                        </Typography>
                                    </div>
                                    <Typography variant="h1">Your Solution Legal Consultacy</Typography>
                                    <Typography variant="body1">We are here to help you take care of your legality with the best service especially for you.</Typography>
                                    <Button variant="contained">GET STARTED</Button>
                                </Grid>
                                <Grid item lg={5}></Grid>
                            </Grid>
                        </Box>
                    </Box>
                </Container>
            </Grid>
        </Grid>
    );
};

export default BannerSlider;

问题排查与解决 #

从错误截图里的Cannot read properties of null (reading 'useContext')信息来看，核心原因是MUI组件没有被ThemeProvider包裹。MUI的绝大多数组件依赖主题上下文，没有上层提供的主题环境，组件无法正常初始化就会抛出这个错误。

解决步骤： #

1. 找到项目的入口文件（通常是App.js或index.js）
2. 导入ThemeProvider和主题创建方法
3. 用ThemeProvider包裹你的根组件

示例代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import BannerSlider from './BannerSlider';

// 使用默认主题，也可以根据需求自定义
const theme = createTheme();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme={theme}>
    <BannerSlider />
  </ThemeProvider>
);

额外检查项： #

• 确认MUI版本（v5要求React 17.0.0及以上）
• 确保所有@mui/material相关依赖包版本一致，避免版本不兼容引发的问题

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