React项目安装@material-ui/core后localhost:3000显示空白页求助

算力阿峰

2026-8-6

解决React引入@material-ui/core后页面空白问题

查看浏览器控制台错误：按F12打开开发者工具，切换到Console面板，组件使用错误、导入问题或版本兼容问题都会在这里抛出具体报错，这是最快定位问题的方式。
确认组件导入正确性：@material-ui/core的下拉框组件为Select和MenuItem，确保导入语句无误：
```
import { Select, MenuItem } from '@material-ui/core';
```
避免出现组件名拼写错误、路径写错等问题。
检查React与Material UI版本兼容性：如果使用React 18及以上版本，旧版@material-ui/core可能存在兼容问题，可执行npm update @material-ui/core升级到最新稳定版，或查阅官方文档确认适配的React版本范围。

规范组件使用方式：Material UI的Select组件需要配合value和onChange属性使用，同时要正确维护组件状态，示例代码如下：

import { useState } from 'react';
import { Select, MenuItem } from '@material-ui/core';

function App() {
  const [selectedVal, setSelectedVal] = useState('');
  return (
    <div>
      <h1>Covid 19 tracker</h1>
      <Select value={selectedVal} onChange={(e) => setSelectedVal(e.target.value)}>
        <MenuItem value="global">全球</MenuItem>
        <MenuItem value="country">国家</MenuItem>
      </Select>
    </div>
  );
}
export default App;

缺失必要属性或状态管理错误会导致组件渲染失败，进而引发页面空白。