Uncaught Error: MUI: makeStyles is no longer exported from - node.js

Question

I started getting this error after migrating to react version 18
makeStyles.js:3 Uncaught Error: MUI: makeStyles is no longer exported from #mui/material/styles. You have to import it from #mui/styles.
I have looked through the docs and tried different things but it didn't work.
How do I make this work?
here is my code:
import { ThemeProvider, createTheme } from "#mui/material/styles";
import { makeStyles } from "#mui/styles";
export default function Program() {
const theme = useTheme();
const [programData, setProgramData] = useState([]);
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
overflow: "hidden",
backgroundColor: theme.palette.background.paper,
},
image: {
height: "72%",
width: "530px",
objectFit: "cover",
paddingBottom: 3,
},
}));
useEffect(() => {
axios
.get("https://cryptic-shelf-72177.herokuapp.com/programs/api")
.then((response) => {
setProgramData([...response.data]);
})
.catch(function (error) {
console.log(error);
});
}, []);
const matches = useMediaQuery(theme.breakpoints.down("xs"));
const classes = useStyles();
return (
<div className={classes.root} style={{ padding: "3vw" }}>
<ImageListItem key="Subheader" style={{ height: "auto" }}></ImageListItem>
<ImageList
rowHeight={550}
cols={matches ? 1 : 3}
className={classes.gridList}
gap={12}
style={{ background: "#A52A2A " }}
>
{programData.length > 0 &&
programData.map((tile, index) => {
return (
<ImageListItem
key={Math.floor(Math.random() * new Date().getTime())}
component={Link}
to={"/programs/" + tile._id + "/programcomments"}
style={{ textDecoration: "none", color: "black" }}
>
<img
src={tile.programImage}
alt={tile.title}
class={classes.image}
/>
<ImageListItemBar
titlePosition="top"
title={tile.title}
// style={{ height: 400 }}
/>
<Typography
paragraph
style={{
borderBottom: "2px solid",
background: "white",
padding: 7,
}}
>
{tile.description.substring(0, 222)}..
</Typography>
</ImageListItem>
);
})}
</ImageList>
</div>
);
}
Everything was working fine until i migrated to React version 18, and made some material us changes that comes with React version 18 and materialui 5

Answer 1

Try this:
Remove all dependencies by deleting node-modules folder in your project.
Open a new terminal and run 'npm install'.
(Those two instructions above are optional)
Since there has been a major change moving from Mui v4 to v5, makeStyles() is deprecated, so that you have to use styled() function instead, and import it from '#emotion/styled';
Example:
import styled from '#emotion/styled';
const useStyles = styled(theme => ({
root: {
//Your styling rules
}
}))
Take a look at the following link as well, thanks for #TeslaDelMar 's answer:
https://www.reddit.com/r/reactjs/comments/uabs6g/material_ui_react_18/
Good luck!