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 星跟踪图

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 许可 条款获得许可。

项目概况

主要编程语言JavaScript
编程语言JavaScript
许可证MIT License
最新版本名称v5.7.0
第一版名称v0.1.29
最后发布时间2022-05-10 11:06:12
首次发布2014-11-05 13:58:30
最后一次提交2022-05-15 17:22:29
创建于2014-08-18T19:11:54
推送于2022-05-15T20:19:11
平台Web browsers Linux Mac Windows
提交数19.7k
关注者数1.4k
名称与所有者mui/material-ui
派生数27k
星数78.4k
问题数15.8k
打开的问题数0.9k
发布数372
语言数3
拉请求数13.3k
打开的拉请求数162
关闭的拉请求数2.9k
已启用问题?
已启用Wiki?
已存档?
是分叉?
已锁定?
是镜像?
是私有?

MUI logo

MUI

Quickly build beautiful [React](https://reactjs.org/) 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](https://material.io/design/introduction/). [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui-org/material-ui/blob/master/LICENSE) [![npm latest package](https://img.shields.io/npm/v/@mui/material/latest.svg)](https://www.npmjs.com/package/@mui/material) [![npm next package](https://img.shields.io/npm/v/@mui/material/next.svg)](https://www.npmjs.com/package/@mui/material) [![npm downloads](https://img.shields.io/npm/dm/@mui/material.svg)](https://www.npmjs.com/package/@mui/material) [![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/next.svg)](https://app.circleci.com/pipelines/github/mui-org/material-ui?branch=next) [![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/next.svg)](https://codecov.io/gh/mui-org/material-ui/branch/next) [![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI) [![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui-org/material-ui/issues/27062) [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](https://isitmaintained.com/project/mui-org/material-ui 'Average time to resolve an issue') [![Crowdin](https://badges.crowdin.net/material-ui-docs/localized.svg)](https://translate.mui.com/project/material-ui-docs) [![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/material-ui)](https://opencollective.com/material-ui)

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
Older versions - **[v4.x](https://v4.mui.com/)** ([Migration from v4 to v5](https://mui.com/guides/migration-v4/)) - **[v3.x](https://v3.mui.com/)** ([Migration from v3 to v4](https://mui.com/guides/migration-v3/)) - **[v0.x](https://v0.mui.com/)** ([Migration to v1](https://mui.com/guides/migration-v0x/))

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

Who sponsors MUI?

Diamond 💎

octopus

doit-intl aptugo

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

Gold 🏆

via Patreon

tidelift

bitsrc Next gen digital product studio.

via OpenCollective

call-em-all hoodiebees

Screen recorder for Mac

Direct

elevator

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

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

Netlify

Netlify allows us to distribute the documentation.

CrowdIn

CrowdIn allows us to translate the documentation.

BrowserStack

BrowserStack allows us to test in real browsers.

CodeCov

CodeCov allows us to monitor the test coverage.

相关项目

    To the top