Material-UI | 轻松上手

bg.png

Material-UI是一个实现了Google's Material Design设计规范的react组件库，开箱即用，使用它可以快速搭建出赏心悦目的应用界面。

一、安装

npm install --save material-ui@next

npm install --save material-ui-icons

二、基本使用

MUI的使用和大多数其它UI框架的区别，它是按需加载的，即需要什么组件引入相应组件即可，比如需要使用Button，就import Button from "material-ui/Button"即可，使用其它组件与此一致。这有利于在bundle打包时，大大地减小bundle体积。

user.png

三、自定义theme主题

使用createMuiTheme创建自定义的theme主题，用MuiThemeProvider包裹MUI组件即可让自定义主题生效。

custom.png

四、Color System

Material-UI提供了一套color system，源码见material-ui/styles/color.js，对颜色进行命名并导出，如red50, red100, redA100等。通过官方提供的Color Tool（https://material.io/color/#!/?view.left=0&view.right=0）可以方便地为你创建一套颜色模板。

color.png

五、Icons

Material-UI使用几何图形，形象化地提供了一套FontIcon和SvgIcon。推荐使用SvgIcon，使用方法如下，

先安装 npm install material-ui-icons -S。

然后按需引入所需要的icon，比如：import AccessAlarmIcon from 'material-ui-icons/AccessAlarm';即可使用AccessAlarmIcon了。

六、Layout

Material-UI提供了响应式UI、Grid布局功能。另外Material-UI组件的外观样式采用的是css in js的方式，使用css in js来写css样式，可以方便且灵活地自定义元素样式。

css in js.png

七、Utils

Material-UI提供了Modal模态框、Popover窗口、Portal等UI工具，还提供了Transitions过渡动画功能。

八、Components

Material-UI提供了近30种按需加载、开箱即用的组件，包括List、Avatar、App Bar、Menu、Picker等常用组件。与组件对应，还提供了若干组件API，为组件更好的用户体验提供了交互功能。在Material-UI官网上，每种组件的使用都有代码演示：

card.png card-code.png

九、小结

Material-UI的界面设计，倾向于同时兼顾PC端和移动端。它的主题和样式可以极其灵活地进行个性化定制，Material-UI对Color和Theme进行了良好封装，采用CSS in JS可以方便地帮助我们完成个性化需求。它还支持服务端渲染。总体上，Material-UI使用还算简单，只需要我们有一定的单页面应用开发基础、会使用react，就可以快速上手。在Material-UI的Github仓库中，还有四五个demo，有助于我们参考学习。

参考资源：

1、Material-UI官网：https://material-ui-next.com/

2、Github仓库：https://github.com/mui-org/material-ui

​ XiaBiBi.jpg