Browser is not showing me Output - reactjs

Question

It's not showing slider and even the png that I have on the folder
please help as it very important m building my portfolio website
import React from "react";
import MenuIcon from "#material-ui/icons/Menu";
import { makeStyles } from "#material-ui/core/styles";
import {
AppBar,
Toolbar,
ListItem,
IconButton,
ListItemText,
Divider,
Avatar,
List,
Typography,
Box,
} from "#material-ui/core";
import {
ArrowBack,
AssignmentInd,
Home,
Apps,
ContactMail,
} from "#material-ui/icons";
import avatar from "../images/ava.png";
// CSS styles
const useStyles = makeStyles({
menuSliderContainer: {
width: 250,
background: "#000000",
height: "30rem",
},
});
const Navbar = () => {
const classes = useStyles;
return (
<>
<Box className={classes.menuSliderContainer} component="div">
<Avatar src={avatar} alt="Cyril Lawrence" />
</Box>
<Box component="nav">
<AppBar style={{ background: "#000000" }}>
<Toolbar>
<IconButton>
<MenuIcon style={{ color: "White" }} />
</IconButton>
<Typography variant="h6" style={{ padding: "0px 0px 0px 10px" }}>
Home
</Typography>
</Toolbar>
</AppBar>
</Box>
</>
);
};
export default Navbar;

Answer 1

Are you sure your path to your image is correct? I would also change all of your material ui imports to be like your MenuIcon import. It is best practice to import your MUI components this way to reduce bundle size. Example import Appbar from '#material-ui/core/Appbar'; This is because when you import like import { Button, TextField } from '#material-ui/core'; you are importing the entire MUI library, even though you are only using a few components. As your application grows you may start to notice load times starting to drag. You may read more about bundle size in the official documentation here https://material-ui.com/guides/minimizing-bundle-size/ You are also not initializing your useStyles function. Change to const classes = useStyles();