material-ui

<p align="center"> <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://yellow-cdn.veclightyear.com/835a84d5/0b754fa5-a0d2-412d-816c-308673edad5b.svg" alt="Material UI 标志"></a> </p> <h1 align="center">Material UI</h1>

Material UI 包含基础的 React UI 组件库，可以帮助您更快地开发新功能：

• Material UI 是一个全面的组件库，实现了 Google 的 Material Design 设计系统。

• Joy UI 是一个精美设计的 React UI 组件库，旨在带来愉悦的开发体验。

<div align="center">

</div>

文档

Material UI

访问 https://mui.com/material-ui/ 查看完整文档。

<details> <summary>旧版本</summary>

• v4.x (从 v4 迁移到 v5)
• v3.x (从 v3 迁移到 v4)
• v0.x (迁移到 v1)

</details>

注意： @next 仅指向预发布版本。 使用 @latest 获取最新稳定版本。

Joy UI

访问 https://mui.com/joy-ui/getting-started/ 查看完整文档。

注意：Joy UI 仍处于测试阶段。 我们正在定期添加新组件，欢迎您贡献！

赞助商

钻石级 💎

<p> <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://yellow-cdn.veclightyear.com/835a84d5/4875334f-0b01-49ee-a79b-cab1589f576c.svg" alt="octopus" title="可重复、可靠的部署" loading="lazy" /></a> <a href="https://www.doit.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://yellow-cdn.veclightyear.com/835a84d5/6fc5ce29-345b-45d1-ac24-a8bd056a829c.svg" alt="doit" title="Google Cloud 和 AWS 的管理平台" loading="lazy" /></a> <a href="https://www.marblism.com/?utm_source=mui" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://yellow-cdn.veclightyear.com/835a84d5/80690758-352a-4871-a641-1d123d97b3e3.svg" alt="marblism" title="AI 网页应用生成" loading="lazy" /></a> </p>

钻石级赞助商是那些每月向 MUI 承诺捐赠 1,500 美元或以上的赞助商。

黄金级 🏆

通过 Open Collective 或 Patreon

<p> <a href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=288" alt="tidelift.com" title="Tidelift：企业级开源软件" loading="lazy" /></a> <a href="https://open.spotify.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/251374?s=288" alt="Spotify" title="Spotify：可访问数百万首歌曲的音乐服务" loading="lazy" /></a> <a href="https://icons8.com?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://yellow-cdn.veclightyear.com/835a84d5/f2fc8a81-d538-4ddd-b875-0d9c7d9552a7.png" alt="Icons8" title="Icons8：图标、照片、插图和音乐的API" loading="lazy"></a> <a href="https://rxdb.info/?utm_source=sponsor&utm_medium=opencollective&utm_campaign=opencollective-mui" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://yellow-cdn.veclightyear.com/835a84d5/18096721-b27b-493e-9885-20641273ab75.svg" alt="RxDB" title="RxDB：本地优先的JavaScript数据库" loading="lazy" /></a> <a href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img src="https://avatars.githubusercontent.com/u/1262264?s=288" alt="text-em-all.com" title="Text-em-all：群发短信和自动电话" height="96" width="96" loading="lazy"></a> <a href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://yellow-cdn.veclightyear.com/835a84d5/46d8cc70-383d-4ad0-9397-0914c434e5db.png" alt="megafamous.com" title="MegaFamous：购买Instagram粉丝和点赞" loading="lazy" /></a> <a href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://yellow-cdn.veclightyear.com/835a84d5/6a487de2-5c8b-4f96-8943-8973a033f604.png" alt="dialmycalls.com" title="DialMyCalls：发送短信、电话和电子邮件" loading="lazy" /></a> <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://yellow-cdn.veclightyear.com/835a84d5/b609c2f8-72e1-4a80-bf4c-3eee5bdbe2f7.png" alt="goread.io" title="Goread.io：Instagram粉丝、点赞、浏览和评论" loading="lazy" /></a> </p>

金牌赞助商是那些每月向MUI承诺500美元或更多的赞助商。

更多支持者

查看我们的支持者完整列表。

问题

对于不涉及代码库更改的操作问题，请使用Stack Overflow而不是GitHub issues。

示例

我们的文档包含一系列示例项目。

高级模板

您可以在MUI商店找到完整的模板和主题。

贡献

阅读贡献指南以了解我们的开发流程、如何提出bug修复和改进建议，以及如何构建和测试您的更改。

贡献不仅仅是关于问题和拉取请求！ 还有许多其他方式支持Material UI，不仅限于为代码库做贡献。

更新日志

更新日志会定期更新，以反映每个新版本的变化。

路线图

未来计划和高优先级功能及增强可以在路线图中找到。

许可证

本项目根据MIT许可证的条款授权。

安全

有关支持的版本和报告安全问题的联系方式详情，请参阅安全政策。

赞助服务

这些优秀的服务赞助了MUI的核心基础设施：

<div> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://mui.com/static/readme/github-darkmode.svg"> <source media="(prefers-color-scheme: light)" srcset="https://yellow-cdn.veclightyear.com/835a84d5/3fbc9495-9d7c-4178-b908-0c06e66a4f5e.svg"> <img alt="GitHub标志" src="https://yellow-cdn.veclightyear.com/835a84d5/3fbc9495-9d7c-4178-b908-0c06e66a4f5e.svg" width="80" height="43"> </picture>

GitHub让我们能够托管Git仓库并协调贡献。

</div> <div> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://mui.com/static/readme/netlify-darkmode.svg"> <source media="(prefers-color-scheme: light)" srcset="https://yellow-cdn.veclightyear.com/835a84d5/0cd51e1d-e078-4144-a651-bdc056c56b16.svg"> <img alt="Netlify标志" src="https://yellow-cdn.veclightyear.com/835a84d5/0cd51e1d-e078-4144-a651-bdc056c56b16.svg" width="100" height="27"> </picture>

Netlify让我们能够分发文档。

</div> <div> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://mui.com/static/readme/browserstack-darkmode.svg"> <source media="(prefers-color-scheme: light)" srcset="https://yellow-cdn.veclightyear.com/835a84d5/f84b4421-3b20-4924-97e8-3bc25c3339f3.svg"> <img alt="BrowserStack 标志" src="https://yellow-cdn.veclightyear.com/835a84d5/f84b4421-3b20-4924-97e8-3bc25c3339f3.svg" width="140" height="25"> </picture>

BrowserStack 让我们能够在真实浏览器中进行测试。

</div> <div> <img loading="lazy" alt="CodeCov 标志" src="https://avatars.githubusercontent.com/u/8226205?s=105" width="35" height="35">

CodeCov 让我们能够监控测试覆盖率。

</div>