material-ui 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
material-ui 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
material-ui 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !

软件简介

MUI logo

MUI

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
Older versions

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.

展开阅读全文

代码

评论 (0)

加载中
更多评论
暂无内容
2019/07/07 17:09

Page in S4 Material search UI

本文同步分享在 博客“汪子熙”(CSDN)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

0
0
发表了博客
2020/12/24 14:16

畅谈React material-ui的样式方案

Google 在 2014年提出了 material design 的设计理念,极具颠覆性,在国外非常受欢迎。 各类前端框架也都出现了material design风格的组件库,其中 React 最受欢迎的 material design 风格组件库非 material-ui 莫属。 mui-org/material-ui 这个开源库目前收获了 61415 star npm 的周下载量达到了 139万 数据摆在那儿,我也就不需要继续“吹捧” material-ui 了。 本文主要是带大家一起领略一下 material-ui 的样式方案。 @mat...

0
0
发表了博客
2019/03/29 14:58

如何评价 React 实现的前端 UI 库 material-ui?

作者:知乎用户 链接:https://www.zhihu.com/question/51040975/answer/208582603 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 有关 Material Design 的 UI 库我用过一些,在用 Material-UI 之前用的是 Google 官方的 Material Design Lite,这是一个纯前端库,非 React 库。 在我用过的库里 Material-UI 还是不错的,可以满足简单需求。其定位是 Material Design 标准组件的实现(而不...

0
0
发表了博客
2019/04/19 22:35

9、Android---UI---Material Design

9.1、什么是Material Design 由谷歌的设计师基于传统优秀设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言 包含了视觉、运行、互动等效果 Material Design的出现使得Android首次再UI方面全面超越了IOS 此时就能解决不同操作系统之间的统一界面 谷歌从5.0系统开始就将所有内置应用都使用Material Design风格来设计 主要是面向UI设计人员并不是开发者。 9.2、Toolbar 之前的标题栏 把系统的ActionBar隐藏 每个活...

0
0
发表了博客
2019/02/03 16:21

Open-source Tutorial - Material Design for WPF UI

安装 Material Design Themes 通过 NuGet 包管理器搜索自动安装 通过 NuGet 包管理器控制台手动安装 Install-Package MaterialDesignThemes 配置 App.xaml 主题 对于 Light 主题(二选一): < ResourceDictionary Source = “ pack:// application:,,, / MaterialDesignThemes.Wpf; component / Themes / MaterialDesignTheme.Light.xaml ” /> 对于 Dark 主题(二选一): < ResourceDictionary Source = “ pack:// ...

0
0
发表了博客
2019/12/24 10:41

使用 material-ui 中的组件 修改按钮的颜色(theme)

看官方文档https://material-ui.com/customization/color/#color,对颜色的使用以及引用都有讲解。 遇到的问题:色调的颜色出不来。 解决之后的代码贴出来: import React from 'react'; import './App.css'; import Button from '@material-ui/core/Button'; import { makeStyles, createMuiTheme,createStyles, Theme ,ThemeProvider} from '@material-ui/core/styles'; import { deepOrange} from '@material-ui/core/colors...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部