MUI System - Overview
MUI System is a collection of CSS utilities for rapidly laying out custom designs with MUI component libraries.
The System gives you a set of flexible, generic wrapper components like
Container that can be quickly customized using the
This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant
const definitions with styled-components.
It also gives you direct access to your theme's custom design tokens to ensure consistency in one-off styles.
Learn more on the
sx prop page.
- Write less code: in situations where styled-components would be overkill, the
sxprop can replace dozens of lines of code.
- Write the CSS you already know: the
sxprop features a superset of CSS, so it's intuitive to pick up and start working with right away if you're comfortable with CSS.
- Avoid context-switching: with styled-components, you frequently have to jump between the usage and the definition to find what you need. With the System, it's all in one place.
- Forget unnecessary custom names: if you've ever struggled to come up with a good name for a styled-component, then you'll appreciate skipping that step entirely when using MUI System.
MUI Base is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI).
MUI Base is a standalone component library, whereas MUI System is supplemental in that it's designed to be paired with MUI Base and other MUI components, as well as third-party components. See the Custom components page for details on how to use MUI System with non-MUI components.