如何根据屏幕尺寸修改MUI（Material UI）Drawer的anchor属性值

云上老周

2026-8-10

实现Drawer根据屏幕尺寸切换展开方向

要让Drawer在移动端从右侧展开、PC端从左侧展开，核心思路是动态检测屏幕宽度，根据尺寸阈值切换anchor属性值。以下是两种实用实现方案：

方案一：使用Material-UI的`useMediaQuery`（推荐）

如果你的项目基于Material-UI，直接用官方提供的useMediaQuery钩子可以轻松适配主题断点，代码更简洁：

import { useMediaQuery, Theme } from '@mui/material/styles';
import Drawer from '@mui/material/Drawer';

function YourComponent() {
  // 以768px为移动端分界（对应MUI的sm断点，可按需修改）
  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
  // 根据设备类型设置展开方向
  const drawerAnchor = isMobile ? 'right' : 'left';

  return (
    <Drawer anchor={drawerAnchor} open={true}>
      My Drawer
    </Drawer>
  );
}

方案二：原生JS监听窗口尺寸变化

如果不用UI库的工具，用React的useState+useEffect监听窗口 resize 事件也能实现：

import { useState, useEffect } from 'react';
import Drawer from '@mui/material/Drawer';

function YourComponent() {
  // 初始化时判断当前屏幕尺寸
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  useEffect(() => {
    // 窗口尺寸变化时更新状态
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    window.addEventListener('resize', handleResize);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const drawerAnchor = isMobile ? 'right' : 'left';

  return (
    <Drawer anchor={drawerAnchor} open={true}>
      My Drawer
    </Drawer>
  );
}