如何使MUI Permanent Drawer被包含在子div内并适配页面布局？

云原生阿岚

2026-6-30

解决MUI Permanent Drawer布局问题

核心调整方案

要让Drawer位于红色Header下方且不覆盖内容，需从布局结构和样式约束两方面入手，确保Drawer被正确嵌套，同时给主内容区设置适配的内边距。

具体实现步骤

重构布局层级
将Drawer放在Header下方的专属容器内，避免与Header同级导致的层级覆盖问题：

<div className="app-container">
  <header className="red-header">红色Header</header>
  <div className="content-wrapper">
    <Drawer variant="permanent" {...props}>
      {/* Drawer内部内容 */}
    </Drawer>
    <main className="main-content">
      {/* 主文本内容 */}
    </main>
  </div>
</div>

设置容器弹性布局
给content-wrapper添加弹性布局属性，让Drawer和主内容区横向排列，并限制容器高度为Header下方的剩余空间：

<div className="content-wrapper" sx={{ 
  display: 'flex', 
  height: 'calc(100vh - 64px)' // 64px为Header高度，可按需调整
}}>

主内容区适配内边距
根据Drawer的宽度给主内容区设置左侧内边距，避免文本被Drawer遮挡：

<main className="main-content" sx={{ 
  paddingLeft: '240px', // 对应默认Permanent Drawer宽度，迷你抽屉可改为64px
  flexGrow: 1,
  padding: 3 // 额外添加上下左右内边距优化文本显示
}}>

约束Drawer高度
确保Drawer高度不超出父容器，避免溢出覆盖其他区域：

<Drawer
  variant="permanent"
  sx={{
    height: '100%',
    '& .MuiDrawer-paper': {
      height: '100%',
      boxSizing: 'border-box'
    }
  }}
>
  {/* Drawer内容 */}
</Drawer>