MUI System - 概述

MUI System 是一组 CSS 实用工具，可帮助您更高效地构建自定义设计。它可以快速布局自定义设计。

简介

MUI System 是一组 CSS 实用工具，可帮助您更高效地构建自定义设计。它在 Material UI、Joy UI 等库内部使用。它也可以用于设置 MUI Base 组件的样式。

MUI System 为您提供一组灵活的通用包装器组件，例如 Box 和 Container，可以使用 sx 属性快速自定义。此属性允许您直接在组件本身内定义样式，而不是使用 styled-components 创建笨重且冗余的 const 定义。它还使您可以直接访问主题的自定义设计令牌，以确保一次性样式的一致性。请在 sx 属性页面上了解更多信息。

MUI System 的优势

• 编写更少的代码：在 styled-components 显得多余的情况下，sx 属性可以替换数十行代码。
• 编写您已经了解的 CSS：sx 属性具有 CSS 的超集，因此如果您熟悉 CSS，则可以直观地掌握并立即开始使用。
• 避免上下文切换：使用 styled-components，您经常需要在用法和定义之间跳转以找到所需内容。使用 MUI System，一切都在一个地方。
• 忘记不必要的自定义名称：如果您曾经努力为 styled-component 想出一个好名字，那么当您使用 MUI System 时，您会欣赏完全跳过这一步。

MUI System 与 MUI Base

MUI Base 是一个“无样式” React 组件库，而 MUI System 是一组实用工具，用于快速将样式应用于这些组件（以及我们的其他组件库，如 Material UI 和 Joy UI）。

MUI Base 是一个独立的组件库，而 MUI System 是补充性的，因为它旨在与 MUI Base 或任何第三方组件配对使用。请参阅自定义组件页面，了解有关如何使用 MUI System 的详细信息。