Material UI 现在是 MUI

什么是 Material UI (MUI React)？

你了解 React.js 吗？如果了解，那么你肯定知道Material-UI——一个流行的 React 组件库。不得不说，Material UI 是市面上顶尖的通用库。它遵循 Google 的 Material Design 指南、组件和工具，旨在提升 Web 应用程序的运行速度。

起源

Material UI最初于 2014 年作为 Google Material Design 规范的 React 实现而推出。其目标很简单，就是让 React 开发人员能够使用 Material Design。

React 社区对新功能感到非常兴奋，因此 MUI 团队不断添加这些功能。

迄今为止，已有超过 2200 名开发者贡献力量，致力于构建面向客户的应用程序、工具以及移动混合应用。如今，React Material UI 已成为市面上最优秀的 React 组件库。

这篇文章基于 Material UI 转向 MUI，在这里我将使用MUI术语来表示后面的部分。

心中有更大的焦点

Material UI 去年做过一项关于改进 Material Design 的调查，发现其实现率下降了 60%。与此同时，开发者在自定义组件方面遇到的困难也增加了 5 倍。

基于此，MUI v5 于 2019 年发布。其主要重点是全新且改进地关注 DX（开发者体验）。新发布的v5.0.0版本包含一些新举措，旨在拓宽 MUI 的视野。

MUI组织的目标是成为构建UI的最有效工具，同时让尽可能多的人能够访问。

MUI 有哪些新功能？

让我们进入全新的 MUI 时代。很多人把 Material UI 与 Google 的 Material Design 混为一谈，甚至将其视为同义词。但实际上，Google 的 Material Design 和 Material UI 实际上是完全相同的。

动图

新名称

Material UI 现在是 MUI。它代表“ Material to build UI ”。
它更简洁。许多人已经用它来发音 Material UI。

新域名

从https://material-ui.com移至https://mui.com。现在在网上输入 mui.com 和查找都非常简单。

新标志

新的 MUI 标志与旧标志非常相似。他们移除了 3D 透视图，并尽可能保持简洁，以符合新的品牌形象。

新的软件包名称

这是一项重大变更 - MUI v5 中的软件包名称已更改。npm 名称已从 @material-ui 移至@mui。更多详情，请参阅发行说明。

新网站和文档

不得不说，新的文档帮助指南真是令人惊叹。MUI 团队真正理解开发者的痛点。入门指南、组件、API、自定义、操作指南和样式等部分都经过了彻底的重构。此外，他们还集成了 Algolia 搜索功能，方便用户查找任何搜索词。

您会发现一个与 Material Design 完全不同的主题，它具有新的字体、颜色、框阴影以及 v5 强大的主题功能。

调色板

以下是 MUI 品牌的新调色板。

MUI 核心 v5.0

隆重推出MUI 核心 v5.0。经过 400 余天的开发和 40 多个版本发布，MUI 团队隆重推出 MUI 核心 v5.0.0！

MUI Core专为可重复使用、易于访问的 UI 组件而设计，您可以组合这些组件来构建您自己的网站或 Web 应用。这些组件免费且开源，因此您可以对其进行编辑，使其完美适配您的设计系统。

动图

特征

组件库包含 40 多个构建块，涵盖按钮、文本字段、表格等众多功能。
自定义主题 - 首先定义您理想的设计系统，然后逐步构建以实现目标。
样式 - CSS 实用类提供了一种轻松添加常见样式的方法。
[图片]

MUI X

MUI X是 MUI 的高端产品。使用市面上最强大的数据网格，您将能够构建复杂的应用程序。MUI
X 软件包使应用程序能够拥有由多个高级组件支持的复杂用例。

• 数据网格
• 日期选择器
• 树视图
• 迷你图
• 图表

MUI 数据网格是一款强大的数据表工具。它拥有众多功能，可帮助您更高效地处理海量数据。从编辑到筛选，MUI X 功能适用于 MUI 的免费版和高级版。

遵循 MUI X路线图以获取未来更新。

全新 MUI 商店

在不同的类别中找到您想要的高级 MUI模板，例如登录页面、仪表板模板和电子商务模板。

有趣的是，经过 MUI 团队的手动测试，MUI 商店系列的平均评分为 4.5。

设计套件

MUI设计套件现在位于您最喜欢的设计工具 - Sketch、Figma 和 XD 中。

选择您喜爱的设计工具，无论是 XD、Figma 还是 Sketch，即可享受并使用 MUI 组件。在与开发人员合作时，提升一致性并促进沟通。

使用相同的库进行设计将使开发更容易，因为您将了解它是如何工作的，无论您是设计师、产品经理还是开发人员，您一定会喜欢 MUI 设计套件。

MUI背后的团队

MUI 的核心贡献者大多是志愿者，如果没有社区的支持，MUI 就无法存在。来自不同国家的众多专业人士为 MUI 项目做出了贡献。

这是核心团队

如何支持MUI？

您可以通过三种不同的渠道支持 MUI

• 给他们反馈
• 在Stackoverflow上回答问题
• 通过开放集体为他们提供经济支持

展示

您可以使用 MUI 找到一些公共应用程序。其中包含的网站尺寸如下

• 非材料设计定制
• 高流量
• 开源

开源 React MUI 模板

• Berry Free React 管理面板
• 最小
• 德维亚斯

高级 React Material MUI 模板

您可以在我的另一篇文章中找到十大 React Material-UI 管理模板。但这里我列出了一些流行的模板。

• Berry React 仪表板模板
• Flexy React
• Material App Pro

有关本文所基于的完整博客文章，请跳转至：https://mui.com/blog/material-ui-is-now-mui/