@mui/system

What is @mui/system?

The @mui/system package is a utility library that provides a suite of CSS utilities for building consistent, theme-based styles across your React application. It is part of the Material-UI ecosystem and offers a way to apply styles using a set of predefined functions and hooks that work with Material-UI's theme object.

What are @mui/system's main functionalities?

Box Component

The Box component serves as a wrapper component for most CSS utility needs. The 'sx' prop is used to apply styles directly, leveraging the theme values for consistency.

{"<Box sx={{ color: 'primary.main', p: 2, m: 1, fontSize: 'h6.fontSize', fontWeight: 'fontWeightMedium' }}>Hello World</Box>"}

System Props

System props allow you to apply styles using specific properties that map to theme values. This is an alternative to the 'sx' prop for applying styles.

{"<Box color='primary.main' p={2} m={1} fontSize='h6.fontSize' fontWeight='fontWeightMedium'>Hello World</Box>"}

Custom Style Functions

Custom style functions allow you to define your own style functions that can be used with the 'styled' utility. This enables you to create more complex and reusable style definitions.

{"import { styled } from '@mui/system';\nconst MyComponent = styled('div')(({ theme }) => ({\n  color: theme.palette.primary.main,\n  padding: theme.spacing(2),\n  margin: theme.spacing(1),\n  fontSize: theme.typography.h6.fontSize,\n  fontWeight: theme.typography.fontWeightMedium\n}));"}

Responsive Values

The package supports responsive values, allowing you to specify different styles for different breakpoints. This is done using an object that maps breakpoints to values within the 'sx' prop or system props.

{"<Box sx={{ width: { xs: 100, sm: 200, md: 300, lg: 400, xl: 500 } }}>Responsive Box</Box>"}

Other packages similar to @mui/system

styled-components

Styled-components is a library for styling React applications using tagged template literals. It allows for CSS-in-JS styling, similar to @mui/system, but does not rely on a theme object by default and has a different syntax for defining styles.

emotion

Emotion is another CSS-in-JS library that allows for styling components using JavaScript. It is similar to @mui/system in providing a theming solution and style composition but differs in its API and additional features like server-side rendering optimizations.

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. It differs from @mui/system in that it is not specifically designed for React and does not use JavaScript functions or a theme object to apply styles.

README

MUI System

MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.

Installation

Install the package in your project directory with:

npm install @mui/system @emotion/react @emotion/styled

Documentation

Visit https://mui.com/system/getting-started/ to view the full documentation.

Changelog

6.3.0

<!-- generated comparing v6.2.1..master -->

Dec 23, 2024

A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

• Fix invalid HTML structure in the Accordion component (#44408) @ZeeshanTamboli The HTML elements of the Accordion summary have been updated:
  • the root element is now button (previously div).
  • summary content and the icon wrapper are now span (previously div). This will only impact you if you used the HTML element as selectors in your styles.