如何在iframe中使用MUI React组件？解决抽屉溢出及嵌套iframe需求

一、修复抽屉超出iframe的问题 #

Material UI的Drawer默认会挂载到浏览器的body元素上，所以会突破iframe边界。要解决这个问题，需修改Drawer的挂载目标：

• 用disablePortal禁用默认的portal挂载行为
• 通过container指定Drawer的父容器（即iframe页面内的根容器）

代码示例（iframe内部的页面代码） #

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

export default function FramedLayout() {
  const [drawerOpen, setDrawerOpen] = useState(false);
  // 获取根容器的ref，作为Drawer的挂载目标
  const rootContainerRef = useRef(null);

  const toggleDrawer = (open) => () => {
    setDrawerOpen(open);
  };

  return (
    // 根容器设置相对定位，让Drawer基于它定位
    <Box ref={rootContainerRef} sx={{ position: 'relative', width: '100%', height: '100vh', overflow: 'hidden' }}>
      {/* 导航栏 */}
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            color="inherit"
            onClick={toggleDrawer(true)}
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            页面标题
          </Typography>
        </Toolbar>
      </AppBar>

      {/* 抽屉菜单 */}
      <Drawer
        open={drawerOpen}
        onClose={toggleDrawer(false)}
        // 禁用portal并指定挂载容器
        disablePortal
        container={rootContainerRef.current}
        sx={{
          '& .MuiDrawer-paper': {
            width: 240,
            // 让抽屉避开导航栏区域
            marginTop: '64px',
            height: 'calc(100% - 64px)',
          },
        }}
      >
        <Box sx={{ p: 2 }}>
          <Typography>菜单选项1</Typography>
          <Typography>菜单选项2</Typography>
          <Typography>菜单选项3</Typography>
        </Box>
      </Drawer>

      {/* 内部嵌套iframe，承载文本内容 */}
      <Box sx={{ marginTop: '64px', width: '100%', height: 'calc(100% - 64px)' }}>
        <iframe
          src="/path/to/text-content-page"
          style={{ width: '100%', height: '100%', border: 'none' }}
          title="文本内容容器"
        />
      </Box>
    </Box>
  );
}

二、关键配置说明 #

• disablePortal: 强制Drawer不使用Material UI的portal机制，避免挂载到浏览器body。
• container: 将Drawer的DOM元素挂载到指定根容器内，使其被限制在iframe边界内。
• 根容器position: relative：确保Drawer的绝对定位基于该容器，而非整个浏览器窗口。
• 内部iframe尺寸计算：通过marginTop: '64px'（匹配AppBar高度）和height: 'calc(100% - 64px)'，让内部iframe占满导航栏下方的剩余空间。

三、外层iframe的设置 #

在外层页面嵌入布局页面时，需给外层iframe设置合适宽高：

<iframe
  src="/path/to/framed-layout-page"
  style="width: 800px; height: 600px; border: 1px solid #ccc;"
  title="带导航和抽屉的容器"
></iframe>

内容的提问来源于stack exchange，提问作者SarahAlexa