使用MUI开发React应用时出现运行时错误

安全阿岳

2026-7-5

MUI React应用运行时错误但终端无报错的修复方案

问题场景

使用Material-UI（MUI）开发React应用时，页面出现运行时渲染错误，但执行npm start启动项目后，终端仅显示编译成功信息，无任何报错提示。涉及的核心源码文件如下：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

App.js

import Navbar from './Navbar.js';
function App() {
    return (
        <div>
            <Navbar/>
        </div> 
    );
}
export default App;

Navbar.js

import { AppBar, Toolbar , Grid } from '@mui/material';
import React from 'react';
const Navbar = () => {
    return (
        <>
            <AppBar>
                <Toolbar>
                    <Grid>

                    </Grid>
                </Toolbar>
            </AppBar>
        </>
    );
}
export default Navbar;

错误说明

运行时错误：页面显示React渲染失败提示
终端状态：npm start执行后仅显示编译完成、项目已启动的信息，无报错

问题原因

MUI的Grid组件属于布局组件，必须指定container或item属性，否则会违反组件内部约束，触发React运行时错误。由于这不属于语法错误，编译阶段（终端）不会检测到，仅在浏览器渲染时触发错误。

解决方案

给Navbar.js中的Grid组件添加container或item属性，根据实际布局需求选择：

修改后的Navbar.js示例：

import { AppBar, Toolbar , Grid } from '@mui/material';
import React from 'react';
const Navbar = () => {
    return (
        <>
            <AppBar>
                <Toolbar>
                    {/* 根据布局需求选择container或item */}
                    <Grid container>
                        {/* 此处添加子元素 */}
                    </Grid>
                </Toolbar>
            </AppBar>
        </>
    );
}
export default Navbar;