In Material-UI v5, some API uses are imported from @mui/material/styles, like useTheme. And some API uses are imported from @mui/styles, like makeStyles. Can I use those style-related APIs from only one library, either @mui/styles or @mui/material/styles? Because, in Material-UI v4, I imported all style-related APIs from '@material-ui/core/styles' or 'material-ui/styles'.
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.