MaterialUI中文使用指南

MaterialUI

ReactUI组件库，用于快速构建界面和设计系统。官网默认版本为v4.11.1(截止到2021年3月11日)。

安装

支持使用npm或者使用CDN加载。

npm

npm install @material-ui/core

CDN

加载Roboto字体

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

简单使用指南

import React from 'react';
import { Button } from '@material-ui/core';

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

主要使用的组织

• NASA
• 沃尔玛实验室
• 凯捷咨询
• 优衣库
• 摩根大通
• Bethesda
• shutterstock
• NETFLIX
• 亚马逊
• Unity
• Spotify

社区地址

• github
• Twitter
• StackOverflow
• 团队

许可证类型

MIT协议

常用组件介绍

Avatar

头像组件

小览

import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';

const useStyles = makeStyle((theme: Theme) =>
    createStyles({
        root: {
            display: 'flex',
            '& > *': {
                margin: theme.spacing(1),
            },
        },
    }),
);

export default function ImageAvatars() {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
            <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
        </div>
    );
}

属性列表

Name	Type	Default	Description
alt	string		结合src或srcSet使用，提供img元素属性
children	node		子元素
classes	object		替代或扩展零部件样式
component	elementType	‘div’	根结点组件
imgProps	object		用于配置’img’元素的组件
sizes	string		'img’元素的尺寸
src	string		'img‘元素的src
srcSet	string		'img’元素的srcSet属性
variant	‘circle’ or ‘rounded’ or ‘square’	‘circle’	图标的形状

样式属性

Rule Name	Global class	Description
root	.MuiAvatar-root	应用于主元素的样式
colorDefault	.MuiAvatar-colorDefault	如果没有设置src或srcSet时候应用于主元素的样式
circle	.MuiAvatar-circle	当形状为’circle’时候应用的样式
circular	.MuiAvatar-circular	当形状为’circular’时候应用的样式
rounded	.MuiAvatar-rounded	当形状为’rounded’时候应用的样式
square	.MuiAvatar-square	当形状为’square’时候应用的样式
img	.MuiAvatar-img	当设置src或srcSet时候应用于’img’元素的样式
fallback	.MuiAvatar-fallback	应用于降级的icon组件的样式

Alert

警告信息提示

小览

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Alert from '@material-ui/lab/Alert';

const userStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        '& > * + *': {
              marginTop: theme.spacing(2),
        }
    }
}));

export default function SimpleAlerts() {
    const classes = useStyes();

    return (
        <div className={classes.root}>
            <Alert severity="error">This is an error alert - check it out!</Alert>
            <Alert severity="warning">This is a warning alert - check it out!</Alert>
            <Alert severity="info">This is an info alert - check it out!</Alert>
            <Alert severity="success">This is a success alert - check it out!</Alert>
        </div>
    );
}

属性列表

Name	Type	Default	Description
action	node		渲染在提示条后方的控件
children	node		组件的内容
classes	object		应用于组件的样式对象
closeText	string	‘Close’	覆盖弹出图标按钮的默认标签
color	‘error’/‘info’/‘success’/‘warning’		Alert主颜色，除非提供，否则采用自定义属性的值
icon	node		覆盖图标样式
iconMaping	{ error?: node, info?: node, success?: node,warning?: node }		修改severity prop属性映射图标数值
onClose	func		关闭时的回调
role	string	‘alert’	角色属性
serverity	‘error’/‘info’/success’/‘warning’	‘success’	定义使用颜色和图标
variant	‘filled’/‘outlined’/‘standard’	‘standard’	填充信息

样式属性

Rule Name	Global class	Description
root	.MuiAlert-root	整体样式
standardSuccess	.MuiAlert-standardSuccess	style of variant=‘standard’ && color=‘success’
standardInfo	.MuiAlert-standardInfo	style of variant=‘standard’ && color=‘info’
standardWarning	.MuiAlert-standardWarning	style of variant=‘standard’ && color=‘warning’
standardError	.MuiAlert-standardError	style of variant=‘standard’ && color=‘error’
outlinedSuccess	.MuiAlert-outlinedSuccess	style of variant=‘outlined’ && color=‘success’
outlinedInfo	.MuiAlert-outlinedInfo	style of variant=‘outlined’ && color=‘info’
outlinedWarning	.MuiAlert-outlinedWarning	style of variant=‘outlined’ && color=‘warning’
outlinedError	.MuiAlert-outlinedWarning	style of variant=‘outlined’ && color=‘warning’
filledSuccess	.MuilAlert-filledSuccess	style of variant=‘filled’ && color=‘success’
filledInfo	.MuiAlert-filledInfo	style of variant=‘filled’ && color=‘info’
filledWarning	.MuiAlert-filledWarning	style of variant=‘filled’ && color=‘warning’
filleError	.MuilAlert-filledError	style of variant=‘filled’ && color=‘error’
icon	.MuiAlert-icon	图标样式
message	.MuiAlert-message	信息主体样式
action	.MuiAlert-action	控件样式

Button

小览

import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete'; 

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            '& > *': {
                margin: theme.spacing(1),
            },
        },
    }),
);

export default function ContainedButtons() {
    const classes = useStyles();
    
    return (
        <div className={classes.root}>
            <Button variant="contained">Default</Button>
            <Button variant="contained" color="primary">
                Primary
            </Button>
            <Button variant="contained" color="secondary">
                Secondary
            </Button>
            <Button variant="contained" disabled>
                Disabled
            </Button>
            <Button variant="contained" color="primary" href="#contained-buttons">
                Link
            </Button>
            <Button variant="contained" color="primary" disableElevation>
                Disable elevation
            </Button>
            <Button>Default</Button>
            <Button variant="outlined">Default</Button>
        </div>
    );
}

属性列表

Name	Type	Default	Description
children	node		button内部内容
classes	object		替代的css样式
color	‘default’/‘inherit’/‘primary’/‘secondary’	‘dafault’	预设的颜色类型
component	elementType	‘button’	父节点的容器类型
disabled	bool	false	不可用状态
disableElevation	bool	false	关闭阴影状态
disableFocusRipple	bool	false	关闭focus状态下的水花效果
disableRipple	bool	false	关闭水花效果
endIcon	node		元素尾部的内容
fullWidth	bool	false	元素是否占满容器
href	string		点击时需要跳转的链接
size	‘large’/‘medium’/‘small’	‘medium’	按钮元素的尺寸
startIcon	node		子元素头部区域
variant	‘contained’/‘outlined’/‘text’	‘text’	使用的形式

样式属性

Rule Name	Global class	Description
root	.MuiButton-root
label	.MuiButton-label
text	.MuiButton-text
textPrimary	.MuiButton-textPrimary
textSecondary	.MuiButton-textSecondary
outlined	.MuiButton-outlined
outlinedPrimary	.MuiButton-outlinedPrimary
outlinedSecondary	.MuiButton-outlinedSecondary
contained	.MuiButton-contained
containedPrimary	.MuiButton-containedPrimary
containedSecondary	.MuiButton-containedSecondary
disableElevation	.MuiButton-disableElevation
focusVisible	.MuiButton-focusVisible
disabled	.MuiButton-disabled
colorInherit	.MuiButton-colorInherit
textSizeSmall	.MuiButton-textSizeSmall
textSizeLarge	.MuiButton-textSizeLarge
outlinedSizeSmall	.MuiButton-outlinedSizeSmall
outlinedSizeLarge	.MuiButton-outlinedSizeLarge
containedSizeSmall	.MuiButton-containedSizeSmall
containedSizeLarge	.MuiButton-containedSizeLarge
sizeSmall	.MuiButton-sizeSmall
sizeLarge	.MuiButton-sizeLarge
fullWidth	.MuiButton-fullWidth
startIcon	.MuiButton-startIcon
endIcon	.MuiButton-endIcon
iconSizeSmall	.MuiButton-iconSizeSmall
iconSizeLarge	.MuiButton-iconSizeLarge