Material UI：Google Material Design React 组件库完全指南

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
  spacing: 8, // 基线网格
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Hello Material UI</Button>
    </ThemeProvider>
  );
}

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

const theme = createTheme({
  // 颜色配置
  palette: {
    mode: 'dark', // 或 'light'
    primary: {
      main: '#90caf9',
      light: '#e3f2fd',
      dark: '#42a5f5',
    },
    secondary: {
      main: '#ce93d8',
    },
    error: {
      main: '#f44336',
    },
    warning: {
      main: '#ff9800',
    },
    info: {
      main: '#2196f3',
    },
    success: {
      main: '#4caf50',
    },
  },

  // 字体配置
  typography: {
    fontFamily: '"Inter", "Roboto", sans-serif',
    h1: { fontSize: '2.5rem', fontWeight: 600 },
    h2: { fontSize: '2rem', fontWeight: 600 },
  },

  // 间距配置（基线 8px）
  spacing: 8,

  // 圆角
  shape: {
    borderRadius: 8,
  },

  // 阴影
  shadows: [
    'none', // shadow-0
    '0px 2px 1px -1px rgba(0,0,0,0.2),...', // shadow-1
    // ... 更多阴影
  ],
});

// 全局覆盖
const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 20,
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
        },
      },
    },
  },
});

// 局部覆盖
<Button
  sx={{
    borderRadius: '20px',
    px: 4,
  }}
>
  Custom Button
</Button>

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

function App() {
  const [mode, setMode] = React.useState<'light' | 'dark'>('light');

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode,
        },
      }),
    [mode],
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline /> {/* 重置 CSS，提供一致的样式 */}
      <Switch onChange={() => setMode(mode === 'light' ? 'dark' : 'light')} />
      <Button>Hello</Button>
    </ThemeProvider>
  );
}

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import IconButton from '@mui/material/IconButton';
import Fab from '@mui/material/Fab';

// 普通按钮
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

// 颜色
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="error">Error</Button>

// 尺寸
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

// 禁用
<Button disabled>Disabled</Button>

// 加载状态
<Button loading>Loading</Button>

// 图标按钮
<IconButton>
  <Icon>delete</Icon>
</IconButton>

// FAB（浮动操作按钮）
<Fab color="primary" aria-label="add">
  <AddIcon />
</Fab>

// 按钮组
<ButtonGroup variant="contained">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

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

// 基本用法
<TextField label="Name" variant="outlined" />

// 密码输入
<TextField
  type="password"
  label="Password"
  autoComplete="current-password"
/>

// 多行文本
<TextField
  label="Description"
  multiline
  rows={4}
  variant="filled"
/>

// 辅助文本
<TextField
  label="Email"
  helperText="请输入有效的邮箱地址"
  error
/>

// 搜索框
<TextField
  InputProps={{
    startAdornment: <InputAdornment>search</InputAdornment>,
  }}
/>

// 选择框
<FormControl>
  <InputLabel>Age</InputLabel>
  <Select label="Age">
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
  </Select>
</FormControl>

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import CardMedia from '@mui/material/CardMedia';

<Card sx={{ maxWidth: 345 }}>
  <CardMedia
    component="img"
    height="140"
    image="/static/images/cards/contemplative-reptile.jpg"
    alt="Contemplative Reptile"
  />
  <CardContent>
    <Typography variant="h5" component="div">
      Lizard
    </Typography>
    <Typography variant="body2" color="text.secondary">
      Lizards are a widespread group of squamate reptiles
    </Typography>
  </CardContent>
  <CardActions>
    <Button size="small">Share</Button>
    <Button size="small">Learn More</Button>
  </CardActions>
</Card>

import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';

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

<Button onClick={() => setOpen(true)}>Open Dialog</Button>

<Dialog open={open} onClose={() => setOpen(false)}>
  <DialogTitle>删除确认</DialogTitle>
  <DialogContent>
    <DialogContentText>
      确定要删除这个项目吗？此操作无法撤销。
    </DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setOpen(false)}>取消</Button>
    <Button onClick={() => setOpen(false)} autoFocus>
      确定
    </Button>
  </DialogActions>
</Dialog>

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';

<TableContainer component={Paper}>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>Dessert (100g serving)</TableCell>
        <TableCell align="right">Calories</TableCell>
        <TableCell align="right">Fat (g)</TableCell>
        <TableCell align="right">Carbs (g)</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow key={row.name}>
          <TableCell component="th" scope="row">{row.name}</TableCell>
          <TableCell align="right">{row.calories}</TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

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

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.success.main,
  color: '#fff',
  padding: '10px 20px',
  '&:hover': {
    backgroundColor: theme.palette.success.dark,
  },
}));

<CustomButton>Custom Styled Button</CustomButton>

// 使用 sx 属性进行快速样式定制
<Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    p: 2,
    bgcolor: 'background.paper',
    borderRadius: 1,
    boxShadow: 3,
    '&:hover': {
      bgcolor: 'grey.100',
    },
  }}
>
  Content
</Box>

// 使用断点
<Box
  sx={{
    // 默认（xs）
    width: 1,
    // md 及以上
    '@media (min-width: 900px)': {
      width: '50%',
    },
  }}
>

// 使用 useMediaQuery
import useMediaQuery from '@mui/material/useMediaQuery';

function App() {
  const matches = useMediaQuery('(min-width:600px)');
  return <span>{matches ? 'Desktop' : 'Mobile'}</span>;
}

// 与 React Context 集成
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  const theme = React.useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

import { lazy, Suspense } from 'react';

const LazyDialog = lazy(() => import('./LazyDialog'));

function App() {
  return (
    <Suspense fallback={<CircularProgress />}>
      <LazyDialog />
    </Suspense>
  );
}

// v5
<DialogActions disableSpacing>

// v6
<DialogActions sx={{ gap: 1 }}>

// v5
<Box sx={{ display: 'flex' }}>

// v6
<Box sx={{ display: 'flex' }}> {/* 基本相同 */}

// v5
<IconButton edge="end">

// v6
<IconButton edge="end"> {/* 基本相同 */}