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

by

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

More Related Contents:

  1. Material UI v4 makeStyles exported from a single file doesn’t retain the styles on refresh
  2. How to add custom MUI palette colors
  3. Global outlined override
  4. Passing props to MUI styles
  5. Change border color on Material-UI TextField
  6. Internal implementation of “makeStyles” in React Material-UI?
  7. How do I custom style the underline of Material-UI without using theme?
  8. Setting text color, outline, and padding on Material-ui Autocomplete component
  9. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  10. Is it possible to override material-ui components default props?
  11. How to use MUI v5 makeStyles without ThemeProvider?
  12. Media queries in MUI components
  13. How do you change a style of a child when hovering over a parent using MUI styles?
  14. × TypeError: Cannot read properties of undefined (reading ‘map’)
  15. React testing library on change for Material UI Select component
  16. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  17. How to add custom Material UI palette colors
  18. Passing props to Material UI styles
  19. Media queries in Material UI components
  20. Material-Ui TextField not affected with the RTL direction
  21. How do you change a style of a child when hovering over a parent using Material UI styles?
  22. Is there a “Best Practices” on designing an application written both in React and React-Native?
  23. Programmatically navigate using React router
  24. My React Component is rendering twice because of Strict Mode
  25. How to set one component’s state from another component in React
  26. Template not provided using create-react-app
  27. How to cancel a fetch on componentWillUnmount
  28. React App goes blank after importing React-Router-Dom
  29. this.setState is undefined
  30. React stateless component this.refs..value?

Leave a Comment