Material UI v1 发布啦 🎉

实现 Google Material Design 的 React 组件。

我们新的文档标题和 logo 由 @hai-cea 设计

我们花了两年时间才完成它，但 Material UI v1 终于到来了！我们对这次发布感到非常兴奋，因为它为项目设定了新的方向。感谢所有人，特别是团队，以及所有贡献了代码、问题分类和支持的人。谢谢你们。

✨✨✨ 请查看 GitHub 上的 1.0.0 发行说明。✨✨✨

一个按钮

v1 的高层次目标

Material UI 是 3 年前由 @hai-cea 启动的。自那时以来，React 生态系统已经发生了巨大的变化，我们也在此过程中学到了很多。两年前，@nathanmarks 开始了一项雄心勃勃的任务，即从头开始重建 Material UI，利用这些知识来解决在可定制性、易用性和代码质量方面的长期存在的问题。

可定制性

Material UI v1 是我们第二次尝试执行 愿景。我们希望 Material UI 能够成为对应用程序开发普遍有用的东西，所有这些都符合 Material Design 指南的精神。Material UI 不仅仅是 Material Design 指南的实现，而是一个通用的 UI 组件库，许多人都需要它。我们甚至允许开发人员在 Material UI 组件之上构建非 Material 主题。我们很快将开源这方面的示例。

• CSS-in-JS。我们过去看到了 内联样式 的巨大潜力 。这是一个一次性解决四个问题的机会：消除 LESS 工具链依赖性、允许动态样式、允许样式代码拆分并简化覆盖。不幸的是，执行未能实现。我们缺乏 CSS 中才有的关键特性：媒体查询、伪选择器、伪元素、浏览器前缀。调试变得更加困难。覆盖样式非常具有挑战性——开发人员总是必须查看实现，并且无法在不依赖 !important 的情况下使用 CSS。两年前，我们决定 从内联样式转向 CSS-in-JS。我们对结果非常满意。我们要感谢 @kof 在 JSS（我们使用的内部解决方案）方面所做的出色工作。它使我们能够与其他所有样式解决方案 互操作。

• 主题。如果没有好的主题故事，您就不可能拥有好的可定制性故事。我们一直在重新设计主题。它是一个 JavaScript 对象，其中包含您可能需要的所有变量和实用程序函数来设置组件样式：调色板、排版、断点助手、过渡助手等。主题对象可以是动态的和嵌套的。

易用性

我们知道易用性是用户获取的关键部分。我们拥有的用户越多，我们就越有可能使项目可持续发展。提高易用性有不同的方式：

• 入门。我们已尽可能减少入门摩擦。我们知道入门是用​​户获取的关键步骤。入门摩擦有不同的形式：我们减少了所需的安装步骤数量。它应该像 1. npm install @mui/material 和 2. import Button from '@mui/material/Button'; 一样简单。我们不要求 polyfill、自定义 webpack 插件或任何特定的构建工具。MuiThemeProvider 的使用不再是强制性的。

• 示例。我们正在托管 示例项目，其中包含启动项目最流行的解决方案：create-react-app、Next.js、Gatsby 和 CDN。

• 隔离。我们的组件现在可以隔离工作。您应该能够在现有代码库中使用单个 Material UI 组件，而不会产生任何副作用。无需全局 CSS 覆盖，没有捆绑包大小膨胀。

• 文档。我们在文档方面进行了大量投资。我们使用 Next.js 来获得极快的导航体验。它还使我们能够为组件提供首次服务器端支持。我们添加了由 Algolia 的 DocSearch 提供支持的搜索栏。（不要错过 s 快捷方式来聚焦搜索栏）。我们添加了许多新的文档部分：指南、FAQ 等。由于与 CodeSandbox 的直接集成，我们使演示更具交互性。

• DOM。在这个 v1 重写中，我们专注于提供底层组件。通过底层，我们指的是尽可能接近底层 DOM 结构且尽可能无状态的组件。它应该有助于减少使用组件的精神负担，鼓励互操作性并简化可定制性。例如，对于 TextField。该组件被分解为 4 个组件。我们的 Input 公开了与原生 input 相同的 API。您可以将一个换成另一个。利用这种结构选择，我们能够演示 3 个自动完成集成示例，包括 Downshift、react-autosuggest 和 react-select。

代码质量

许多人通过 Material UI 发现 Web 开发，但它也用于生产中，为数百万客户提供服务。我们肩负着重要的责任，我们的实施需要坚如磐石。

• 最佳实践。 我们尽可能遵循最佳实践。我们使组件：完全可访问，完全 HTML5 兼容 且对 SEO 友好。

Material UI 文档主页的 Lighthouse 报告

• 持续集成。 每一行代码都经过测试。我们拥有令人印象深刻的 💯% 测试覆盖率。对于 700 多位贡献者来说，这非常重要。所有这些测试使我们能够快速迭代并充满信心地进行。我们在所有支持的平台上运行测试套件。借助 Argos-CI，我们还运行了超过 180 个视觉回归测试。

BrowserStack 构建示例

• 捆绑包大小。如果您采用所有 Material UI 组件，您的捆绑包大小将超过 100 kB gzipped。Material UI 看起来像一个巨大的依赖项，但实际上通过代码拆分可以很好地解决。您很可能在给定的页面/屏幕上使用大约 40% 的库。捆绑包大小很重要。它受到 持续监控，这可以防止我们引入大小回归，并使我们能够认识到积极的努力。

size-limit 示例

• 开发警告。由于 UI 组件的 API 表面非常大，因此很容易偏离既定路径。我们已将大量提出的问题浓缩为许多信息丰富的开发模式警告，以帮助您保持在正确的轨道上。除了 propTypes 之外，我们还添加了超过 20 个警告，并且随着我们发现更多边缘情况，列表将会增长。

v1 中的新功能？

新事物太多了，我们无法详尽列举。除了我们已经宣布的内容之外，您还会发现：

• 更简单、更强大的主题
• Grid 布局组件
• 新的文档
• 从右到左 (Right-To-Left) 支持
• 一流的服务器端支持
• 高级主题
• 一流的 TypeScript 支持
• 以及更多更多

下一步是什么？

• Material Design。 Google Design 团队最近发布了 Material Design 指南的新迭代，重点是主题化。这是个好消息！我们将尽力保持最新。这也证实了在 v1 中大力投资可定制性是一个正确的决定。我们将继续努力。

• 更多实用程序。 我们希望开发新的实用程序组件：Spacing、Display、Color 等。

• 文档。 我们希望托管多个版本的文档。每个次要版本都将带来我们文档的新托管版本。目前，我们有 v1.0.0，并且在 v1.1.0 发布时，我们也会添加它。之前的版本将继续从我们的导航栏链接，就像 v0.x 的情况一样。我们希望将文档翻译成中文和更多语言。欢迎任何帮助！

• 学习资料。 文档的质量与实现的质量同等重要，虽然参考文档很全面，但我们可以编写一个像 Next.js 那样的 学习教程，或者一个 egghead.io 课程。

• 主题。 我们希望提供常见的布局示例，使入门更容易。我们还计划添加更多高级主题。

• 性能。 我们无法优化我们无法衡量的东西，而且我们目前没有 CI 性能基准，因此我们需要构建一个并开始调查瓶颈。

• 捆绑包大小。 该库需要尽可能小，因此我们需要研究解决方案以进一步减小捆绑包大小，例如，支持 Preact 或 Nerv 可能会有所帮助。

• 类型检查。 我们将继续改进库的 TypeScript，也许还有 Flow 覆盖率。

高级主题

我们已经发布了期待已久的 Material UI v1 稳定版本。凭借旨在更好地支持定制的新代码库，现在是开始构建和推广高级主题的绝佳时机。我们很高兴宣布 Creative Tim 的前两个主题 。更多主题即将推出。

Creative Tim 主题

我们即将发布的开源主题的预览。

谢谢

最后，再次感谢所有为 Material UI v1 做出贡献的人。我很高兴我们使其稳定，但请放心，这仅仅是开始。我们将继续努力交付尽可能最好的 UI 组件库。

Material UI 是一个 MIT 许可的开源项目。这是一个独立的项目，并在这些出色的 赞助者 的支持下不断发展。如果您想加入他们，请考虑：

• 在 Open Collective 上成为赞助者或赞助商.
• 在 Patreon 上成为赞助者或赞助商.

我们的黄金赞助商

• GitHub: https://github.com/mui/material-ui ⭐
• X: https://x.com/MUI_hq