useMediaQuery 是 Material UI 提供的一个自定义 Hook，允许开发者根据媒体查询条件来控制组件的渲染和样式。这对于响应式设计非常重要，能够根据不同的屏幕尺寸和设备类型调整应用的外观和功能。

1. 基本概念

useMediaQuery Hook 可以根据 CSS 媒体查询返回布尔值，指示当前屏幕是否符合指定的条件。这对于实现响应式布局、隐藏/显示组件、调整样式等非常有用。

2. 安装 Material UI

如果尚未安装 Material UI，可以通过以下命令进行安装：

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

3. 使用 useMediaQuery

3.1 引入 useMediaQuery

首先，我们需要引入 useMediaQuery Hook 及其他必要的组件：

import React from 'react';
import { useMediaQuery } from '@mui/material';
import { Box, Typography, Button } from '@mui/material';

3.2 创建基础示例

以下是一个简单的示例，根据屏幕大小调整显示的文本：

const MediaQueryExample = () => {
  const isSmallScreen = useMediaQuery('(max-width:600px)');

  return (
    <Box sx={{ textAlign: 'center', marginTop: 4 }}>
      <Typography variant="h4">
        {isSmallScreen ? '小屏幕' : '大屏幕'}
      </Typography>
      <Button variant="contained" sx={{ marginTop: 2 }}>
        {isSmallScreen ? '我在手机上' : '我在桌面上'}
      </Button>
    </Box>
  );
};

3.3 解释代码

• useMediaQuery: 该 Hook 接受一个媒体查询字符串（如 '(max-width:600px)'），并返回一个布尔值。这里如果屏幕宽度小于 600 像素，isSmallScreen 为 true，否则为 false。
• 条件渲染: 根据 isSmallScreen 的值，动态显示不同的文本和按钮。

4. 进阶用法

4.1 使用主题的断点

Material UI 的主题中预定义了断点，可以使用这些断点来创建更具可读性的媒体查询。例如，使用 theme.breakpoints.up 或 theme.breakpoints.down。

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

const ThemedMediaQueryExample = () => {
  const theme = useTheme();
  const isLargeScreen = useMediaQuery(theme.breakpoints.up('md'));

  return (
    <Box sx={{ textAlign: 'center', marginTop: 4 }}>
      <Typography variant="h4">
        {isLargeScreen ? '大屏幕' : '小屏幕'}
      </Typography>
    </Box>
  );
};

4.2 在组件中控制布局

使用 useMediaQuery 可以动态控制组件的布局。例如，可以在不同屏幕尺寸下使用不同的 Grid 布局：

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

const ResponsiveGrid = () => {
  const isSmallScreen = useMediaQuery('(max-width:600px)');

  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <Box sx={{ padding: 2, backgroundColor: 'lightblue' }}>
          <Typography>组件 1</Typography>
        </Box>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Box sx={{ padding: 2, backgroundColor: 'lightgreen' }}>
          <Typography>组件 2</Typography>
        </Box>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Box sx={{ padding: 2, backgroundColor: 'lightcoral' }}>
          <Typography>组件 3</Typography>
        </Box>
      </Grid>
    </Grid>
  );
};

4.3 嵌套和组合媒体查询

在某些情况下，可能需要嵌套或组合多个媒体查询。可以将 useMediaQuery 与条件语句结合使用，达到复杂的响应式效果：

const NestedMediaQueryExample = () => {
  const isSmallScreen = useMediaQuery('(max-width:600px)');
  const isMediumScreen = useMediaQuery('(min-width:601px) and (max-width:960px)');

  return (
    <Box sx={{ textAlign: 'center', marginTop: 4 }}>
      {isSmallScreen && <Typography variant="h4">这是手机视图</Typography>}
      {isMediumScreen && <Typography variant="h4">这是平板视图</Typography>}
      {!isSmallScreen && !isMediumScreen && <Typography variant="h4">这是桌面视图</Typography>}
    </Box>
  );
};

5. 结合其他组件的使用示例

5.1 与 Drawer 结合使用

可以使用 useMediaQuery 控制侧边栏（Drawer）的打开状态：

import React, { useState } from 'react';
import { AppBar, Toolbar, IconButton, Drawer, useMediaQuery } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';

const ResponsiveDrawer = () => {
  const [open, setOpen] = useState(false);
  const isMobile = useMediaQuery('(max-width:600px)');

  const toggleDrawer = () => {
    setOpen((prev) => !prev);
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" onClick={toggleDrawer}>
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Drawer anchor={isMobile ? 'bottom' : 'left'} open={open} onClose={toggleDrawer}>
        <Box sx={{ width: 250 }}>
          <Typography variant="h6" sx={{ padding: 2 }}>Drawer 内容</Typography>
          <Button onClick={toggleDrawer}>关闭</Button>
        </Box>
      </Drawer>
    </div>
  );
};

5.2 与 Snackbar 结合使用

在某些情况下，可以根据屏幕大小调整 Snackbar 的位置：

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

const ResponsiveSnackbar = () => {
  const [open, setOpen] = useState(false);
  const isMobile = useMediaQuery('(max-width:600px)');

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

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

  return (
    <Box>
      <Button variant="outlined" onClick={handleClick}>显示 Snackbar</Button>
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: isMobile ? 'center' : 'right',
        }}
        open={open}
        onClose={handleClose}
        message="这是一个响应式 Snackbar"
        autoHideDuration={3000}
      />
    </Box>
  );
};

6. 结束语

通过使用 useMediaQuery，可以轻松地为应用程序添加响应式设计。无论是根据屏幕大小调整组件的渲染、样式，还是控制布局，都能够让你的应用看起来更专业、更易于使用。

希望本文能帮助你更好地理解和使用 Material UI 中的 useMediaQuery！如果你有任何问题或建议，欢迎在评论区留言。