Matarialize中文技术社区-Material UI专栏-Material UI 组件库详解

Material UI 组件库详解

MUI

Material UI（现在称为 MUI）是一个流行的 React 组件库，致力于提供符合 Material Design 规范的组件。本文将详细介绍 MUI 的所有主要组件，涵盖它们的使用方法、属性、示例代码以及与其他组件的结合使用。

1. 组件概述

MUI 提供了丰富的组件，可以大致分类为以下几类：

基础组件：如按钮、输入框、选择框等。
布局组件：如栅格、容器、卡片等。
导航组件：如菜单、标签、导航栏等。
反馈组件：如对话框、提示框、加载器等。
数据展示组件：如表格、图表、列表等。

2. 基础组件

2.1 Button（按钮）

MUI 的 Button 组件是最常用的组件之一，支持多种样式和状态。

import React from 'react';
import Button from '@mui/material/Button';

function BasicButton() {
    return (
        <div>
            <Button variant="text">文本按钮</Button>
            <Button variant="outlined">轮廓按钮</Button>
            <Button variant="contained" color="primary">
                实体按钮
            </Button>
        </div>
    );
}

属性

variant: 指定按钮类型，取值为 text、outlined 和 contained。
color: 设置按钮颜色，取值为 default、inherit、primary、secondary。
onClick: 点击事件处理函数。

2.2 TextField（文本输入框）

TextField 组件用于输入文本。

import React from 'react';
import TextField from '@mui/material/TextField';

function BasicTextField() {
    return (
        <TextField
            label="输入你的名字"
            variant="outlined"
            fullWidth
        />
    );
}

属性

label: 输入框的标签。
variant: 输入框样式，取值为 filled、outlined 和 standard。
fullWidth: 设置输入框是否占满宽度。

2.3 Select（选择框）

Select 组件用于选择一个选项。

import React from 'react';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

function BasicSelect() {
    const [value, setValue] = React.useState('');

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    return (
        <FormControl fullWidth>
            <Select
                value={value}
                onChange={handleChange}
                displayEmpty
            >
                <MenuItem value="" disabled>
                    选择一个选项
                </MenuItem>
                <MenuItem value={10}>选项 1</MenuItem>
                <MenuItem value={20}>选项 2</MenuItem>
                <MenuItem value={30}>选项 3</MenuItem>
            </Select>
        </FormControl>
    );
}

属性

value: 选择框的当前值。
onChange: 选择值变化的处理函数。
displayEmpty: 是否显示空项。

3. 布局组件

3.1 Grid（栅格系统）

Grid 组件用于布局。

import React from 'react';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';

function BasicGrid() {
    return (
        <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
                <Paper>左侧内容</Paper>
            </Grid>
            <Grid item xs={12} sm={6}>
                <Paper>右侧内容</Paper>
            </Grid>
        </Grid>
    );
}

属性

container: 将 Grid 设置为容器。
item: 将 Grid 设置为子项。
spacing: 设置间距。

3.2 Card（卡片）

Card 组件用于展示相关内容。

import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

function BasicCard() {
    return (
        <Card>
            <CardContent>
                <Typography variant="h5">卡片标题</Typography>
                <Typography color="textSecondary">一些描述信息</Typography>
            </CardContent>
        </Card>
    );
}

属性

raised: 是否添加阴影。
variant: 设置卡片类型。

4. 导航组件

4.1 AppBar（应用栏）

AppBar 组件用于展示应用的标题和导航。

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

function BasicAppBar() {
    return (
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6">应用标题</Typography>
            </Toolbar>
        </AppBar>
    );
}

属性

position: 设置应用栏的位置，取值为 fixed、absolute、sticky、static。

4.2 Tabs（标签页）

Tabs 组件用于切换不同的内容。

import React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';

function BasicTabs() {
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    return (
        <div>
            <Tabs value={value} onChange={handleChange}>
                <Tab label="标签 1" />
                <Tab label="标签 2" />
            </Tabs>
            <Typography>
                {value === 0 ? "标签 1 的内容" : "标签 2 的内容"}
            </Typography>
        </div>
    );
}

属性

value: 当前选中的标签。
onChange: 标签变化的处理函数。

5. 反馈组件

5.1 Dialog（对话框）

Dialog 组件用于展示对话框。

import React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';

function BasicDialog() {
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <Button variant="outlined" onClick={handleClickOpen}>
                打开对话框
            </Button>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>对话框标题</DialogTitle>
                <DialogContent>
                    一些内容...
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">关闭</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

属性

open: 控制对话框的显示状态。
onClose: 关闭对话框的处理函数。

5.2 Snackbar（提示框）

Snackbar 组件用于展示临时消息。

import React from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';

function BasicSnackbar() {
    const [open, setOpen] = React.useState(false);

    const handleClick = () => {
        setOpen(true);
    };

    const handleClose = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }
        setOpen(false);
    };

    return (
        <div>
            <Button onClick={handleClick}>显示提示框</Button>
            <Snackbar
                open={open}
                autoHideDuration={6000}
                onClose={handleClose}
                message="这是一个提示消息"
            />
        </div>
    );
}

属性

open: 控制 Snackbar 的显示状态。
autoHideDuration: 消息自动消失的时间（毫秒）。

6. 数据展示组件

6.1 Table（表格）

Table 组件用于展示数据。

import React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function BasicTable() {
    const rows = [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
    ];

    return (
        <TableContainer component={Paper}>
            <Table>
                <TableHead>
                    <TableRow>
                        <TableCell>姓名</TableCell>


                        <TableCell>年龄</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <TableRow key={row.name}>
                            <TableCell>{row.name}</TableCell>
                            <TableCell>{row.age}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

属性

size: 设置表格大小，取值为 small、medium、large。
stickyHeader: 表头是否固定。

7. 综合示例

结合上述组件，构建一个简单的用户管理界面。

import React from 'react';
import { AppBar, Toolbar, Typography, Button, Grid, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';

function UserManagement() {
    const [open, setOpen] = React.useState(false);

    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6">用户管理</Typography>
                </Toolbar>
            </AppBar>
            <Button variant="outlined" onClick={handleOpen}>添加用户</Button>
            <TableContainer component={Paper}>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>姓名</TableCell>
                            <TableCell>年龄</TableCell>
                            <TableCell>操作</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        <TableRow>
                            <TableCell>John</TableCell>
                            <TableCell>30</TableCell>
                            <TableCell>
                                <Button onClick={handleOpen}>编辑</Button>
                            </TableCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </TableContainer>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>添加用户</DialogTitle>
                <DialogContent>
                    {/* 表单内容 */}
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">取消</Button>
                    <Button onClick={handleClose} color="primary">保存</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

export default UserManagement;

8. 结论

MUI 是一个功能强大的组件库，提供了丰富的组件和灵活的定制能力。通过上述介绍和示例，您可以开始使用 MUI 来构建符合 Material Design 规范的现代化 Web 应用。不断探索和实践，将帮助您更深入地理解和运用 MUI。如果您有更多问题或需要进一步的帮助，欢迎随时询问！

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}