Difference between @mui/material/styles and @mui/styles?

Question

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'.

Answer 1

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