React 的material-ui组件简介@material-ui/core ( @mui/material) 提供了

@material-ui/core ( @mui/material) 提供了一系列丰富的 UI 组件，用于构建响应式和现代化的前端界面。以下是 30 个常用的组件的详细介绍。

1. AppBar

功能: AppBar 是用于显示工具栏、导航栏等顶部栏的组件，通常放在页面顶部。
高级功能: 可以结合 Toolbar 使用，放置标题、按钮、图标等。

import { AppBar, Toolbar, Typography } from '@material-ui/core';

<AppBar position="static">
  <Toolbar>
    <Typography variant="h6">My App</Typography>
  </Toolbar>
</AppBar>
**常用属性**: `position`（静态、固定、相对位置）。

2. Toolbar

功能: 用于将内容组织在顶部工具栏中，通常与 AppBar 结合使用。
高级功能: 可以根据窗口尺寸调整工具栏的布局，常用于应用程序的头部区域。

<Toolbar>
  <Typography variant="h6">Toolbar Content</Typography>
</Toolbar>

3. Button

基本功能：按钮组件，用于触发操作。

高级功能：支持不同的颜色、大小、变体（text, outlined, contained）、图标按钮、禁用状态等。

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

<Button variant="contained" color="primary">
  Primary Button
</Button>

variant（显示样式）
text（默认值）：按钮只有文本，没有边框或背景颜色。
outlined：按钮有边框，但没有实心背景，通常用于次要操作。
contained：按钮有实心背景，强调度较高，通常用于主要操作。

`color`（`primary`, `secondary`, `default`）

4. Typography

功能: 控制文本样式的组件，用于设置文字的排版格式。
高级功能: 支持不同的 variant（如 h1, h2, body1, caption），用于适应不同级别的文本。

<Typography variant="h4" color="textSecondary">
  Heading Text
</Typography>

5. IconButton

功能: 包含图标的按钮，通常用于轻量级交互，如删除、编辑等操作。
高级功能: 可以接受 size 和 color 等参数来调整图标按钮的大小和颜色。

import { IconButton } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import { Delete } from '@material-ui/icons';

<IconButton color="inherit">
  <MenuIcon />
</IconButton>

<IconButton color="primary"> 
    <Delete /> 
</IconButton>

6. Drawer

功能: 侧边栏菜单，通常用于导航。
高级功能: 支持滑动显示（SwipeableDrawer）和固定显示。常用于移动端或桌面端的侧边导航。

import { Drawer, List, ListItem } from '@material-ui/core';

<Drawer anchor="left" open={open} onClose={toggleDrawer(false)}>
  <List>
    <ListItem button>Home</ListItem>
    <ListItem button>Profile</ListItem>
  </List>
</Drawer>

7. Grid

功能: 实现响应式布局的网格系统。
高级功能: Grid 通过 xs, sm, md, lg, xl 定义不同屏幕尺寸下的布局。

import { Grid } from '@material-ui/core';

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    Column 1
  </Grid>
  <Grid item xs={12} sm={6}>
    Column 2
  </Grid>
</Grid>

8. TextField

功能: 表单中的文本输入框。
高级功能: 支持多种类型的输入，如 password, number, email，并且带有验证、提示等功能。

import { TextField } from '@material-ui/core';
<TextField label="Name" variant="outlined" />

9. Card

功能: 用于包裹内容的容器，通常用于展示图片、文字等信息块。
高级功能: 可以与 CardMedia, CardContent, CardActions 组合使用。

import { Card, CardContent, Typography } from '@material-ui/core';

<Card>
  <CardContent>
    <Typography variant="h5">Card Title</Typography>
    <Typography variant="body2">Card Content</Typography>
  </CardContent>
</Card>

10. Snackbar

功能: 用于显示短暂的提示信息。
高级功能: 可以添加 action 来让用户执行操作。

import { Snackbar } from '@material-ui/core';

<Snackbar
  open={true}
  message="This is a message"
  autoHideDuration={6000}
/>

11. Dialog

功能: 对话框组件，通常用于确认、提示用户操作。
高级功能: 包含 DialogTitle, DialogContent, DialogActions 等，用于控制对话框内容。

import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';

<Dialog open={open}>
  <DialogTitle>Dialog Title</DialogTitle>
  <DialogContent>This is the dialog content.</DialogContent>
</Dialog>

12. CircularProgress

功能: 圆形进度条，通常用于加载提示。
高级功能: 可以通过 size 和 color 属性自定义大小和颜色。

import { CircularProgress } from '@material-ui/core';

<CircularProgress color="secondary" />

13. LinearProgress

功能: 线性进度条。
高级功能: 可以设置 value 来控制进度的完成度。

import { LinearProgress } from '@material-ui/core';

<LinearProgress variant="determinate" value={50} />

14. List

功能: 显示列表项的组件。
高级功能: 可以和 ListItem, ListItemIcon, ListItemText 组合使用。

import { List, ListItem, ListItemText } from '@material-ui/core';

<List>
  <ListItem>
    <ListItemText primary="Item 1" />
  </ListItem>
</List>

15. Badge

功能: 用于显示一个小徽章，通常用于消息通知。
高级功能: 可以自定义 badgeContent 来显示特定的数字。

import { Badge } from '@material-ui/core';

<Badge badgeContent={4} color="primary">
  <MailIcon />
</Badge>

16. Tooltip

功能: 鼠标悬停时显示提示信息。
高级功能: 可以自定义显示延迟，控制提示内容的显示时机。

import { Tooltip } from '@material-ui/core';

<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

17. Paper

功能: 提供纸张样式的容器，用于包裹内容。
高级功能: 支持 elevation 属性来设置阴影效果。

import { Paper } from '@material-ui/core';

<Paper elevation={3}>
  This is some content inside a paper container.
</Paper>

18. Tabs

功能: 标签页，用于切换不同的视图。
高级功能: 结合 Tab 组件，支持水平和垂直的标签排列。

import { Tabs, Tab } from '@material-ui/core';

<Tabs value={value} onChange={handleChange}>
  <Tab label="Tab 1" />
  <Tab label="Tab 2" />
</Tabs>

19. Avatar

功能: 显示用户头像或缩略图。
高级功能: 可以显示文本、图标、图片。

import { Avatar } from '@material-ui/core';

<Avatar alt="User" src="/path-to-image.jpg" />

20. Chip

功能: 显示可操作的小标签。
高级功能: 支持可删除、可点击功能。

import { Chip } from '@material-ui/core';

<Chip label="Chip Label" onDelete={handleDelete} />

21. FormControl

功能: 表单控件的包装组件，通常与输入组件组合使用。
高级功能: 支持状态控制（disabled、error）。

import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';

<FormControl>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select labelId="demo-simple-select-label" id="demo-simple-select">
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
  </Select>
</FormControl>

22. Checkbox

功能: 表示布尔值的复选框。
高级功能: 支持 checked, indeterminate 状态。

import { Checkbox } from '@material-ui/core';

<Checkbox checked={checked} onChange={handleChange} />

23. Radio

功能: 单选按钮，用于选择一个选项。
高级功能: 支持 checked, color 等参数。

import { Radio } from '@material-ui/core';

<Radio checked={selectedValue === 'a'} value="a" />

24. RadioGroup

功能: 单选按钮组，组合多个单选按钮。
高级功能: 自动管理单选按钮的状态和选择逻辑。

import { RadioGroup, Radio } from '@material-ui/core';

<RadioGroup value={value} onChange={handleChange}>
  <Radio value="option1" label="Option 1" />
  <Radio value="option2" label="Option 2" />
</RadioGroup>

25. Switch

功能: 用于切换布尔值状态的开关。
高级功能: 可以自定义 color, checked 属性来改变样式和行为。

import { Switch } from '@material-ui/core';

<Switch checked={state.checked} onChange={handleChange} />

26. Menu

功能: 下拉菜单，用于显示一组选项。
高级功能: 结合 MenuItem 组件使用。

import { Menu, MenuItem } from '@material-ui/core';

<Menu open={Boolean(anchorEl)} onClose={handleClose}>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>

27. Popover

功能: 显示一个相对于触发元素的位置浮动面板。
高级功能: 支持 anchorEl 属性来控制相对位置。

import { Popover } from '@material-ui/core';

<Popover
  open={Boolean(anchorEl)}
  anchorEl={anchorEl}
  onClose={handleClose}
>
  <Typography>The content of the Popover.</Typography>
</Popover>

28. Slider

功能: 拖动条，用于在给定范围内选择数值。
高级功能: 支持 value, min, max, step 参数。

import { Slider } from '@material-ui/core';

<Slider value={value} min={0} max={100} step={1} onChange={handleChange} />

29. Table

功能: 显示表格数据。
高级功能: 可以组合 TableHead, TableBody, TableRow, TableCell 来自定义表格结构。

import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Age</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>29</TableCell>
    </TableRow>
  </TableBody>
</Table>

30. Accordion

功能: 折叠面板，用于展示可展开/收起的内容。
高级功能: 支持 expanded 属性来控制展开状态。

import { Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';

<Accordion>
  <AccordionSummary>
    <Typography>Accordion Title</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>Accordion Content</Typography>
  </AccordionDetails>
</Accordion>

友情赞助
大家有空闲，帮忙试用下，国货抖音出品的AI编程代码插件，比比看GitHub Copilot那个好**^-^**
（适用JetBrains全家桶系列、Visual Studio家族IDE工具安装等主流IDE工具，支持100+种编程语言）
帮忙去助力>>