Advertisements
I tried to download
npm install @mui/material @emotion/react @emotion/styled --force
after
npm install @material-ui/icons
npm install @material-ui/core
and that all not works
I got only errors
My code of the Appbar is simple from 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>
);
}
and main "App.js" file
import './App.css';
import Appbar from './components/Appbar'
function App() {
return (
<div className="App">
<Appbar/>
</div>
);
}
export default App;
The error of the compilation is
Module not found: Error: Can't resolve '@material-ui/core/styles' in 'D:\oop\studentsystem\studentfrontend\src\components'
WARNING in [eslint]
Failed to compile.
Module not found: Error: Can't resolve '@mui/icons-material/Menu' in 'D:\oop\studentsystem\studentfrontend\src\components'
ERROR in ./src/components/Appbar.js 11:0-48
Module not found: Error: Can't resolve '@mui/icons-material/Menu' in 'D:\oop\studentsystem\studentfrontend\src\components'
webpack compiled with 1 error
I dont know how to solve that problem, because i have just today started to learn React js and frontend generally.
Sorry for my stupidity, help please me, if you can.:)
>Solution :
You have to install the right packages:
npm install @mui/icons-material
@mui and @material-ui are 2 different things