CODEWITHSUNDEEP
reactjsmaterial-ui
Rasheduzzaman Sourov
Rasheduzzaman Sourov

Reputation: 1515

How to import makeStyles from Material UI?

I am using Material UI version 5.2.7. When I import makeStyles from @mui/materials/styles, I am getting the following error -

Uncaught Error: MUI: makeStyles is no longer exported from @mui/material/styles. You have to import it from @mui/styles. See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.

It also says that @mui/styles is deprecated in Material UI version 5. So I am confused about how I can import makeStyles. Does anyone have any idea about this?

Upvotes: 18

Views: 64893

Answers (4)

paulhenry
paulhenry

Reputation: 137

I came across this thread. I know this is a bit old but you can still use makeStyles in Material UI v5 using this import (will be deprecated):

import makeStyles from '@mui/styles/makeStyles';

This is automatically updated if you run their codemod from their documentation migrating from V4 to V5: Material UI Codemod

Upvotes: 4

Wraithy
Wraithy

Reputation: 2056

As you can see in documentation, using makeStyles is deprecated now in Material UI as a concept, because they do not want to use JSS anymore, instead they suggest using emotion/react library or styled components.

Upvotes: 20

cachius
cachius

Reputation: 1907

The successor of jss is tss-react:

makeStyles is dead 😧 long live makeStyles! 🎉

The great hook based CSS-in-JS API now with state of the art TypeScript support 🚀

From the Readme:

'tss-react' is intended to be the replacement for @material-ui v4 makeStyles and 'react-jss'.

It's option #2 in the guide on Migrating from JSS. Developed and maintained independently by Joseph Garrone.

There's also an automated codemod available for helping you with switching:

npx @mui/codemod v5.0.0/jss-to-styled <path>

Upvotes: 4

Dusan
Dusan

Reputation: 101

instead of makeStyles you can just create object with styles ( style={your styles} ) inside functional component and then use sx property( sx={style} ) on MUI component inside that functional component.

Upvotes: 10

Related Questions