找不到模块：错误：无法解析"D：\"中的"@mui/图标材料/菜单"

Question

我尝试下载

npm install @mui/material @emotion/react @emotion/styled --force

后

npm install @material-ui/icons
npm install @material-ui/core 

，这些都不起作用我只得到错误

输入图片描述

我的Appbar代码很简单，从ui materials

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
export default function Appbar() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
);
}

和main " app . j"文件

import './App.css';
import Appbar from './components/Appbar' 

function App() {
return (
<div className="App">
<Appbar/>
</div>
);
}
export default App;

编译错误为

Module not found: Error: Can't resolve '@material-ui/core/styles' in 'D:oopstudentsystemstudentfrontendsrccomponents'
WARNING in [eslint] 
Failed to compile.
Module not found: Error: Can't resolve '@mui/icons-material/Menu' in 'D:oopstudentsystemstudentfrontendsrccomponents'
ERROR in ./src/components/Appbar.js 11:0-48
Module not found: Error: Can't resolve '@mui/icons-material/Menu' in 'D:oopstudentsystemstudentfrontendsrccomponents'
webpack compiled with 1 error

我不知道如何解决这个问题，因为我今天才开始学习React js和前端。很抱歉我的愚蠢，如果可以的话，请帮助我。:)

Answer 1

你必须安装正确的软件包:

npm install @mui/icons-material

@mui和@material-ui是两个不同的东西

Here is the Guide