MUI System - Overview

MUI System is a collection of CSS utilities for rapidly laying out custom designs with MUI component libraries.

Introduction

MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like Material UI, Joy UI, and MUI Base.

The System gives you a set of flexible, generic wrapper components like Box and Container that can be quickly customized using the sx prop. 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.

Advantages of MUI System

• Write less code: in situations where styled-components would be overkill, the sx prop can replace dozens of lines of code.
• Write the CSS you already know: the sx prop 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 System vs. MUI Base

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 the System is supplemental in that it's designed to be paired with 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.