I have been trying to style my MUI5 react app using the makeStyles and createStyles hooks. The root className is being styled perfectly, but I am facing an issue with styling the logoIcon. Despite multiple attempts to debug the problem, I have not been successful.
import { AppBar, Toolbar } from "@mui/material";
import PetsIcon from "@mui/icons-material/Pets";
import { createStyles, makeStyles } from "@mui/styles";
const useStyles = makeStyles((theme) =>
createStyles({
root: {
backgroundColor: theme.palette.primary.light,
},
logoIcon: {
height: "5rem",
width: "5rem",
},
})
);
export const Navbar = () => {
const classes = useStyles();
return (
<AppBar elevation={0}>
<Toolbar className={classes.root}>
<PetsIcon
className={classes.logoIcon}
// sx={{ height: "5rem", width: "5rem" }}
/>
</Toolbar>
</AppBar>
);
};
The logo icon is not receiving the styles as expected. Interestingly, when I comment out the className={classes.logoIcon} line and uncomment the sx line, the styles are applied correctly. I have reviewed the documentation numerous times without finding the error in my code. Any assistance would be greatly appreciated. Thank you