MUI

一个健壮的、可定制的、可访问的基础和高级库

Material designReactComponent ToolkitDesign System
mui/material-uimui.com/core/@mui/material

README


MUI logo

MUI 核心


MUI Core包含基础 React UI 组件库，用于更快地发布新功能。

- _Material UI_是一个全面的组件库，以我们对 Google 的Material Design系统的实现为特色。

- _Joy UI_是一个设计精美的 React UI 组件库。

- _MUI Base_是我们的“无样式”组件和低级挂钩库。使用 Base，您可以完全控制应用程序的 CSS 和辅助功能。

- _MUI 系统_是 CSS 实用程序的集合，可帮助您快速布置自定义设计。


Stable channel v5
license npm latest package npm next package npm downloads CircleCI Coverage Status Follow on Twitter Renovate status Average time to resolve an issue Crowdin Open Collective backers and sponsors CII Best Practices


安装


Material UI


Material UI 可作为npm 包使用。

npm:

  1. ```sh
  2. npm install @mui/material @emotion/react @emotion/styled
  3. ```

yarn:

  1. ```sh
  2. yarn add @mui/material @emotion/react @emotion/styled
  3. ```

Older versions

- v4.x (Migration from v4 to v5)

- v3.x (Migration from v3 to v4)

- v0.x (Migration to v1)

注意： @next仅指向预发布。

使用@latest获取最新的稳定版本。

MUI Base


MUI Base 作为npm 包提供。

npm:

  1. ```sh
  2. npm install @mui/base
  3. ```

yarn:

  1. ```sh
  2. yarn add @mui/base
  3. ```

注意：MUI Base 仍处于 alpha 阶段。

我们会定期添加新组件，欢迎您做出贡献！

MUI 系统


MUI 系统作为npm 包提供。

npm:

  1. ```sh
  2. npm install @mui/system @emotion/react @emotion/styled
  3. ```

yarn:

  1. ```sh
  2. yarn add @mui/system @emotion/react @emotion/styled
  3. ```

或者如果你想使用styled-components作为样式引擎：

npm:

  1. ```sh
  2. npm install @mui/material @mui/styled-engine-sc styled-components
  3. ```

yarn:

  1. ```sh
  2. yarn add @mui/material @mui/styled-engine-sc styled-components
  3. ```

请访问我们的 styled-engine指南，了解有关如何将styled-components配置为样式引擎的更多信息。

赞助商


钻石 💎


octopus doit zesty.io


钻石赞助商是那些承诺每月向 MUI 提供 1,500 美元或更多的赞助商。

黄金 🏆


通过OpenCollective或通过Patreon

tidelift.com bit.dev text-em-all.com netticasinohex.com megafamous.com dialmycalls.com goread.io Icons8 ipinfo.ai RIDI


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

更多支持者


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

Material UI 入门


下面是一个使用 Material UI 的Button组件的基本应用程序示例：

  1. ``` js
  2. import * as React from 'react';
  3. import Button from '@mui/material/Button';

  5. function App() {
  6.   return <Button variant="contained">Hello World</Button>;
  7. }
  8. ```

在下面的交互式演示中，尝试更改代码并查看它如何影响输出。
（提示：将变体更改为“outlined”，将颜色更改为“secondary”。
有关更多选项，请参阅我们文档中的 Button组件页面。）
Edit Button

问题


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

在 Stack Overflow 上使用“mui”标签，让社区更容易找到您的问题。

例子


我们的文档包含一系列使用 Material UI 的示例项目。

文档


- Material UI
- Joy UI
- MUI Base
- MUI System

高级主题


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

贡献


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

为 MUI Core 做贡献不仅仅是问题和拉取请求！
除了贡献代码库之外，还有许多其他方法可以支持 MUI 。

变更记录


更改日志会定期更新以反映每个新版本中的更改。

路线图


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

执照


该项目根据以下条款获得许可
我的执照。

安全


支持版本详情和安全问题报告联系方式请参考安全政策。

赞助服务


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

GitHub让我们可以托管 Git 存储库并协调贡献。

Netlify让我们分发文档。

Crowdin让我们翻译文档。

BrowserStack让我们可以在真实的浏览器中进行测试。

CodeCov让我们可以监控测试覆盖率。