Normally in v4, you’d import the style API from @material-ui/core/styles. This one uses JSS behind the scene:
import { makeStyles } from '@material-ui/core/styles';
In v5, they changed the brand name to MUI. As a result, the package name changed too:
import { makeStyles } from '@mui/material/styles';
But MUI v5 also drops the support for JSS (which makeStyles/withStyles are using), so they move those APIs to a legacy package called @mui/styles. (They plan to remove this API in v6, but there are some pushback. See this issue for more info)
import { makeStyles } from '@mui/styles';
And encourage the users to adopt a newer styling solution (sx, styled) using emotion as a default style engine:
import { styled } from "@mui/material/styles";
So in summary, the difference between the @mui/material/styles and @mui/styles is that:
@mui/styles |
@mui/material/styles |
|---|---|
Doesn’t come with a default theme, need createTheme / ThemeProvider |
Come with a default material theme (as opposed to the other planned theme) |
| Legacy styling package | Depends on the new @mui/system package |
| Powered by JSS | Powered by emotion (as a default style engine) |
Has makeStyles/withStyles |
Doesn’t have makeStyles/withStyles, has styled instead |
You should not mix @mui/styles with @mui/material/styles. Choose one styling solution and stick with it because duplicated classNames from different style libraries can lead to unexpected side-effects and hard-to-find bugs. If you’re creating a new project or having a small v4 project, I recommend migrating completely to the emotion solution to avoid adding extra bundle size because MUI component uses emotion, not JSS anymore in the new version.
References
- https://mui.com/styles/basics/#main-content
- https://mui.com/guides/migration-v4/#heading-mui-material-styles