MUI(原名 Material-UI)

MUI(原名 Material-UI)是你一直想要的 React UI 库。遵循你自己的设计系统,或者从 Material Design 开始。「 MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design. 」

Github stars Tracking Chart

MUI(Material-UI)

快速构建漂亮的 React 应用程序。MUI 是一个简单的、可定制的组件库,用于构建更快、更漂亮、更易使用的 React 应用程序。遵循你自己的设计系统,或者从 Material Design 开始。

安装

MUI 以 npm package 的形式提供。

Stable channel v5

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled
较早的版本

请注意,@next 仅指向预发布;要获得最新的稳定版本,请使用 @latest。

支持 MUI

Material-UI是 MIT 授权的开源项目。这是一个独立的项目,由于这些令人敬畏的支持者的支持而成为可能。如果你想加入他们,请考虑:

你的贡献,捐赠和赞助使我们能够建立一个可持续的组织。他们直接支持办公时间,持续改进,出色的文档和学习资料!

Patreon 和 OpenCollective 有什么区别?

通过 Patreon 捐赠的资金直接支持 Olivier Tassinari 在 Material-UI 上的工作。 通过 OpenCollective 捐赠的资金是透明管理的,将用于补偿核心团队成员的工作和费用。 您的姓名/徽标将通过在任一平台上捐赠获得适当的认可和曝光。

用法(v1-beta)

这是一个让您入门的快速示例,它就是您所需要的:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

是的,正如您在此实时和交互式演示中所看到的,这真的是您需要的所有内容:

Edit Button

问题

对于 how-to 问题和其他非问题, 请使用 StackOverflow 而不是Github问题。有一个名为 material-ui 的 StackOverflow 标签。你可以用它来标记你的问题。

示例

您是否正在寻找一个示例项目来开始? 我们拥有一些

文档

请参阅我们的 文档网站

贡献

我们非常感谢您提供的任何贡献。 :)

更新日志

最近更新?请阅读 更新日志

路线图

未来计划和高优先级功能以及增强功能可以在 ROADMAP.md 文件中找到。

许可证

该项目根据 MIT 许可 条款获得许可。

Overview

Name With Ownermui/material-ui
Primary LanguageTypeScript
Program languageJavaScript (Language Count: 4)
PlatformWeb browsers, Linux, Mac, Windows
License:MIT License
Release Count468
Last Release Namev5.15.14 (Posted on 2024-03-19 09:18:37)
First Release Namev0.1.29 (Posted on )
Created At2014-08-18 19:11:54
Pushed At2024-03-24 17:02:51
Last Commit At2024-03-22 15:17:56
Stargazers Count91.2k
Watchers Count1.4k
Fork Count31.3k
Commits Count24.3k
Has Issues Enabled
Issues Count18765
Issue Open Count1582
Pull Requests Count17749
Pull Requests Open Count181
Pull Requests Close Count3793
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

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

Installation

MUI is available as an npm package.

Stable channel v5

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Please note that @next will only point to pre-releases; to get the latest stable release use @latest instead.

Who sponsors MUI?

Diamond 💎

Diamond Sponsors are those who have pledged $1,500/month or more to MUI.

Gold 🏆

via Patreon

via OpenCollective

Direct

Gold Sponsors are those who have pledged $500/month or more to MUI.

There is more!

See the full list of our backers.

Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Edit Button

Questions

For how-to questions and other non-issues,
please use StackOverflow instead of GitHub issues.
There is a StackOverflow tag called "material-ui" that you can use to tag your questions.

Examples

Are you looking for an example project to get started?
We host some.

Documentation

Check out our documentation website.

Premium Themes

You can find complete templates & themes in the MUI store.

Contributing

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to MUI.

Notice that contributions go far beyond pull requests and commits.
Although we love giving you the opportunity to put your stamp on MUI, we also are thrilled to receive a variety of other contributions.

Changelog

If you have recently updated, please read the changelog for details of what has changed.

Roadmap

The future plans and high priority features and enhancements can be found in the roadmap file.

License

This project is licensed under the terms of the
MIT license.

Sponsoring services

These great services sponsor MUI's core infrastructure:

GitHub allows us to host the Git repository and coordinate contributions.

Netlify allows us to distribute the documentation.

CrowdIn allows us to translate the documentation.

BrowserStack allows us to test in real browsers.

CodeCov allows us to monitor the test coverage.

To the top