# 概览(MUI System - Overview)

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

MUI System 是 CSS 工具的集合，用于使用 MUI 组件库快速布局自定义设计。

# 介绍(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 Base UI.

MUI System 是一组 CSS 实用工具，可帮助您在使用 Material UI、Joy UI 和 Base UI 等 MUI 组件库时更有效地构建自定义设计。

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.

MUI System(下称MS)提供了一组预定义的组件，例如 Box 和 Container，这些组件可以通过配置 sx prop来自定义样式。 通过配置sxprop允许您直接修改组件的样式，这在当你使用预制组件设置某些一次性样式时会很有用，避免了通过styled-components方式创建一些不需要的组件，同时sx属性中也支持获取定义的主题样式。在 sx prop 页面上了解更多信息。

# MS的优势(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.

  书写更少的代码： 与单纯的使用styled-components的方式相比，使用sx可以少些数十行代码。

• 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. 避免了上下文切换 使用styled-components方式时你需要在定义和用法之间频繁的切换来获取到对应上下文中的内容，然而使用MS方式时所有数据都在一个上下文中。

• 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. 忘记不必要的自定义组件名 使用styled-components的方式创建你需要为创建的组件设置不同的名字，而MS完全不需要这种繁琐的仪式。

# MUI System vs. Base UI

Base UI 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). Base UI is a standalone component library, whereas MUI System is supplemental in that it's designed to be paired with Base UI 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.

Base UI 是一个“无样式”React 组件库，而 MUI System 是一组用于快速将样式应用于这些组件的实用程序（以及其他 MUI 组件库，如 Material UI 和 Joy UI）。Base UI 是一个独立的组件库，而 MUI System 是补充性的，因为它旨在与 Base UI 和其他 MUI 组件以及第三方组件配合使用。有关如何将 MUI 系统与非 MUI 组件一起使用的详细信息，请参阅自定义组件页面。

# 安装(Installation)

# 默认安装(Default installation)

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

# 同时安装预制组件(With styled-components)

MUI System uses Emotion as its default styling engine. If you want to use styled-components instead, run one of the following commands:

MS默认使用Emotion作为其样式引擎。如果你想在项目中使用styled-components，那么请执行下面这条指令：

npm install @mui/system @mui/styled-engine-sc styled-components

# Peer dependencies

基于MS开发请指定react的版本。

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0"
}