@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

CSS utilities for rapidly laying out custom designs.

Installation

Install the package in your project directory with:

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

// with yarn
yarn add @mui/system @emotion/react @emotion/styled

Documentation

The documentation