react material ui实现

React Material-UI 实现

Material-UI（现更名为 MUI）是一个流行的 React UI 组件库，基于 Google 的 Material Design 设计规范。以下是实现 Material-UI 的步骤：

安装 Material-UI

使用 npm 或 yarn 安装核心库和图标库：

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

基本组件使用

在 React 组件中导入并使用 Material-UI 组件：

import Button from '@mui/material/Button';
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';

function App() {
  return (
    <div>
      <Button variant="contained">Click Me</Button>
      <AccessAlarmIcon />
    </div>
  );
}

主题定制

创建自定义主题并应用于整个应用：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 应用内容 */}
    </ThemeProvider>
  );
}

响应式布局

使用 Material-UI 的 Grid 组件实现响应式布局：

import Grid from '@mui/material/Grid';

function App() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        {/* 内容 */}
      </Grid>
    </Grid>
  );
}

表单控件

实现带有验证的表单：

import TextField from '@mui/material/TextField';
import { useState } from 'react';

function FormExample() {
  const [value, setValue] = useState('');

  return (
    <TextField
      label="Name"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      error={value.length < 3}
      helperText={value.length < 3 ? 'Minimum 3 characters' : ''}
    />
  );
}

样式覆盖

使用 sx prop 或 styled 函数自定义组件样式：

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const CustomButton = styled(Button)({
  backgroundColor: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
});

function App() {
  return (
    <CustomButton variant="contained">
      Styled Button
    </CustomButton>
  );
}

对话框实现

创建交互式对话框：

import { useState } 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 AlertDialog() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Alert</DialogTitle>
        <DialogContent>This is a dialog content</DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>Cancel</Button>
          <Button onClick={() => setOpen(false)}>OK</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

数据表格

实现功能丰富的数据表格：

import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name', width: 130 },
];

const rows = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
];

function DataTable() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
}

导航菜单

创建响应式导航栏：

import { useState } from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';

function NavBar() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" onClick={() => setOpen(true)}>
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Drawer open={open} onClose={() => setOpen(false)}>
        <List>
          <ListItem button>
            <ListItemText primary="Home" />
          </ListItem>
          <ListItem button>
            <ListItemText primary="About" />
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
}

暗黑模式

实现主题切换功能：

import { useState, useMemo } from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import IconButton from '@mui/material/IconButton';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';

function ThemeToggle() {
  const [mode, setMode] = useState('light');
  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          mode,
        },
      }),
    [mode]
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <IconButton onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
        {mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
      </IconButton>
    </ThemeProvider>
  );
}