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()