组件

Button 常见属性:

1. variant
2. text
3. size
4. small

<Button></Button>

Paper 阴影盒子

Avatar 头像组件

<Avatar alt='' src=''></Avatar>

Typography

<Typography id="modal-modal-title" variant="h6" component="h2" sx={ { mt: 2 } }>Text in a modal</Typography>

自定义Typography

布局-间隔组件 Stack

<Stack direction="row"></Search>

分割线Divider

模态框

<Modal>

图标组件SVGIcon

<Stack 
	direction="row" 
	sx={ {
      display: 'flex',
      justifyContent: 'space-between',
    } }>
	<SvgIcon sx={ { fontSize: 50 } }>
        <GitHub />
    </SvgIcon>
    <SvgIcon sx={ { fontSize: 50 } }>
	    <GitHub />
    </SvgIcon>
    <SvgIcon sx={ { fontSize: 50 } }>
        <GitHub />
    </SvgIcon>
</Stack>

链接 Link

与其他Link组件冲突的解决方案 Link

表单

• FormControl 包含布局

自定义输入框

• OutlinedInput
  • startAdornment
  • endAdornment
• InputBase

盒子/盒型组件 Paper Paper