跳至内容
返回博客

MUI 生态系统简介

Sam Sycamore

@samuelsycamore
+
Logos for all the high-level MUI products.

MUI 不仅仅是 Material UI！

如果您认为 MUI 只是我们最受欢迎产品的简称，那您情有可原。事实上，MUI 作为一个组织成立是为了满足 Material UI 社区日益增长的需求，现在负责一整套相关产品。

Material UI 是旗舰产品；但它也是通往 MUI 不断扩展的 UI 工具生态系统的门户。

尽管我们的根基在于 Material Design，但我们现在正在超越这些限制，为开发人员提供更广泛的工具，以便更快地交付新功能。

我们的主要产品分为两个产品线：Core 和 X。MUI Core 包含我们的基础组件库（如 Material UI），而 MUI X 提供更复杂的组件（如数据网格）。

我们还处于开发名为 Toolpad 的低代码内部工具构建器的早期阶段，它使您可以在拖放界面中使用每个 Core 和 X 组件进行构建。

请继续阅读以了解有关我们每个产品的更多详细信息。

MUI 核心

Diagram with all the MUI Core sub-products.

Core 是 MUI 的基础产品线。它起源于 Material UI，该库的遗产在 GitHub 上以仓库的名称延续了下来：mui/material-ui。

但如今，该仓库包含的不仅仅是 Material UI。我们仔细地解构了这个库，将其最好的部分作为独立的开源项目公开。最近添加的项目包括 Joy UI 和 Base UI，以及我们内部的样式解决方案 MUI System。

MUI Core 是开源的，我们邀请您在您认为合适的地方做出贡献！

Material UI

Material UI 是一个开源的 React 组件库，它实现了 Google 的 Material Design。它包括一个全面的预构建组件集合，可以直接在生产环境中使用。

Material UI 在设计上很美观，并具有一套自定义选项，可以轻松地在我们的组件之上实现您自己的自定义设计系统。

请在 Material UI 文档中开始使用。

主要功能

  • Material Design： 借助我们对 Material Design 的精细实现（目前为 M2；M3 即将推出），您的应用程序默认情况下将具有出色的外观和感觉。
  • 全面性： 拥有 50 多个基础组件，并且还在不断增加，您拥有快速交付新功能所需的一切。
  • 成熟度： Material UI 的历史和成熟度可与 React 本身媲美，其起源可以追溯到 2014 年。
  • 社区： 超过 2,500 名开源贡献者使该库发展成今天的样子。

理想的用例

  • 严格遵守 Material Design 的用户界面。
  • 内部管理工具。
  • 需要在数小时而不是数周内交付功能的开发团队。

Joy UI

Joy UI 是一个开源的 React 组件库，它实现了 MUI 自有的内部设计原则。它旨在作为 Material UI 的替代品，用于不符合 Material Design 规范的设计。

如果您喜欢 Material UI 的全面性和可靠性，但不需要 Material Design 带来的所有额外负担，请尝试使用 Joy UI。

请在 Joy UI 文档中开始使用。

主要功能

  • 创新设计： Joy UI 不受 Material Design 的约束，我们可以在这里创新和试验设计、UX 和 DX 的全新想法。
  • 灵活性： 轻松自定义，并利用 CSS 变量的强大功能，确保在进行像素级调整时保持一致性。

理想的用例

  • 不涉及 Material Design 的项目。
  • 在自定义时会从不那么固执的默认值中受益的设计系统。
  • 需要看起来和感觉上与您的品牌明显不同的面向客户的应用程序。

Base UI

Base UI 是一个无头（“无样式”）React UI 组件和钩子的开源库。这些组件是从 Material UI 中提取的，现在可以作为独立软件包使用。它们具有相同的强大工程技术，但没有任何默认样式解决方案或主题。

Base UI 包括具有生产就绪功能的预构建组件，以及用于将该功能转移到其他组件的底层钩子。

请在 Base UI 文档中开始使用。

主要功能

  • 对样式的完全控制： 与 Material UI 和 Joy UI 不同，Base UI 不附带任何默认样式或样式解决方案。您可以随意编写 CSS — 原生、模块化、样式化组件 — 或者集成一个样式库，如 Tailwind CSS 或 Emotion。
  • 用于完全自定义组件的钩子： 当预构建组件不够灵活时，底层钩子使您可以快速向自定义组件添加复杂的功能。
  • 可访问性： Base UI 组件的构建考虑了可访问性。我们会尽力使所有组件都对屏幕阅读器友好，并在我们的文档中提供有关优化可访问性的建议。
  • MUI Core 的核心： Base UI 用作 Joy UI 组件的支架，并且 Material UI 的未来版本也将以 Base UI 为基础构建。

理想的用例

  • 实现完全自定义的设计。
  • 在 Material UI 或 Joy UI 应用程序中创建自定义组件。
  • 向完全自定义的组件添加功能。

MUI 系统

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

该系统为您提供了一组灵活的通用包装器组件，如 Box 和 Container，可以使用 sx 属性快速自定义。此属性允许您直接在组件本身中定义样式，而不是使用样式化组件创建笨重且冗余的 const 定义。它还允许您直接访问主题的自定义设计令牌，以确保一次性样式的一致性。

请在 MUI System 文档中开始使用。

主要功能

  • 更快的原型制作： sx 属性允许您通过编写您已经知道的 CSS 直接将样式应用于组件。这使其成为快速组装原型或为不需要重用的一次性组件设置样式的绝佳工具。
  • 编写更少的代码： sx 使您可以避免编写不必要的样式化组件代码，因此它可以替换数十行代码。请查看 为什么要使用 MUI System？ 获取示例。

理想的用例

  • 在 Material UI、Joy UI 或 Base UI 中快速制作自定义样式的原型。
  • 创建一次性自定义组件。

MUI X

Diagram with all the MUI X components.

MUI X 是一个高级 UI 组件集合，包括数据网格以及日期和时间选择器。

这些组件比 MUI Core 库中的组件复杂得多。它们具有用于数据密集型应用程序和各种其他用例的高级功能。虽然 X 组件本身与 MUI Core 集成，但它们是分开的，因此您可以更轻松地使用它们来实现自定义设计系统。

MUI X 是开放核心的。基本组件采用 MIT 许可，而更高级的功能则需要 Pro 或 Premium 商业许可。有关详细信息，请参阅许可。

数据网格

MUI X 数据网格是一个快速且可扩展的 React 数据表，具有高级功能，适用于数据管理和分析中的高级用户和复杂用例。它具有直观的 UI 和相应的 API，用于显示数据集的不同视图，并支持实时更新、可访问性、主题和自定义模板。

主要功能

  • 数据管理： 轻松创建、检索、更新和删除数据。
  • 复杂的数据分析： 固定行和列、分组和聚合值、将数据的视图导出为其他格式。MUI X 的数据网格是当今市场上功能最丰富的网格之一。
  • 直观的自定义： 如果您熟悉 Material UI，自定义数据网格的样式和行为的方式与您期望的完全相同，在此过程中无需掌握任何新概念。
  • 可访问性： 众所周知，优化数据网格的可访问性非常困难，这正是我们将其作为首要任务的原因 — 我们会专注于这些细节，让您不必这样做。

理想的用例

  • 具有大量数据集的应用程序。
  • 应用程序中的数据分析工具，减少了跳转到 Excel 的需要。
  • 使用需要高级功能的 MUI Core 库构建的应用程序。

日期和时间选择器

MUI X 日期和时间选择器是一组 React UI 组件，允许用户从对话框和文本字段中选择日期和时间。组件包括日期选择器、时间选择器、日期范围选择器和日期时间选择器，未来还会推出更多组件。

主要功能

  • 第三方日期库支持：所有组件都支持许多最流行的日期库，因此您可以选择您喜欢的任何一个。
  • 本地化：选择器针对世界各地使用进行了优化，支持所有日期和时间格式的变体。

理想的用例

  • 需要用户输入日期和时间的表单。
  • 使用日期和时间范围的预订应用程序。
  • 使用高级日期和时间验证及约束的企业应用程序。
  • 需要日期和时间功能的、使用 MUI Core 库构建的应用程序。

Toolpad

Small screenshot of Toolpad's interface.

Toolpad 是一个自托管的低代码管理构建器，旨在扩展 MUI 的 React 组件套件。它专为希望节省构建内部应用程序时间的各种开发人员而设计。拖放预构建的 UI 组件，连接您的数据源，您的应用程序就可以部署了。

主要特点

  • 比以往更快地构建：使用 Toolpad，您的开发时间可以按分钟而不是小时或天来衡量。跳过 UI 开发的繁琐工作，直接进入核心业务逻辑。
  • 使用您已经熟悉的组件：Toolpad 预装了 MUI Core 和 X 库，让您在拖放界面中拥有 MUI 组件的全部功能。
  • 可通过代码扩展：首先只需使用最基本的 JavaScript 即可启动并运行，然后根据需要从“低代码”跳转到“专业代码”，以添加自定义功能。

理想用例

  • 有严格期限的管理工具。
  • 用于前端和全栈开发的快速浏览器内原型设计。

接下来会推出什么

MUI 长期坚定地致力于 React 生态系统——我们的公司使命是以数十年为单位来衡量的，因为我们相信这个开源社区的持久力量。

我们设想一个世界，在这个世界中，MUI 的组件库将成为全球 React 开发人员的行业标准，并且我们已经定义了一些雄心勃勃的增长目标，以便在未来几年内实现这一目标。

为了及时了解我们所有的新产品和功能，您可以在此页面底部注册我们的邮件列表，以接收每月更新。

我们迫不及待地想看看您创造了什么！