Search code examples
reactjsmaterial-uistyled-components

What's the difference between @mui/material and @mui/system?

I'm using MUIv5 and looking at this documentation, it's still unclear the difference between @mui/material vs @mui/system.

This is mainly in the context of using the styled(link) utility.

I've noticed they use both (interchangeably):

import { styled } from '@mui/material/styles';

import { styled } from '@mui/system';

What's the difference/in what context should I use each of them?

Solution

  • The @mui/system contains all the css values and the sx prop. The @mui/material is the thing you usually want to use. It's hard to differentiate between these two because the Material UI uses the MUI System among Joy UI and MUI Base in itself for it's basic css utilities. so when you import material, you are using them both.

    You can see the @mui/system dependency in the package.json file of @mui/material:

    "dependencies": {
    "@babel/runtime": "^7.17.2",
    "@mui/base": "5.0.0-alpha.87",
    "@mui/system": "^5.8.6",
    "@mui/types": "^7.1.4",
    "@mui/utils": "^5.8.6",
    "@types/react-transition-group": "^4.4.4",
    "clsx": "^1.1.1",
    "csstype": "^3.1.0",
    "prop-types": "^15.8.1",
    "react-is": "^17.0.2",
    "react-transition-group": "^4.4.2"
  }

    And also studying the README.md file of @mui/material can be helpful for learning more about each package:

    <h1 align="center">MUI Core</h1>

**MUI Core** contains foundational React UI component libraries for shipping new features faster.

- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://material.io/design/introduction/) system.

- [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components.

- [_MUI Base_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.

- [_MUI System_](https://mui.com/system/basics/) is a collection of CSS utilities to help you rapidly lay out custom designs.