如何在MUI的Modal组件内正确使用SwipeableDrawer？

出现滚动条闪现、动画抖动的核心原因是两层组件的内置逻辑冲突：

• Modal和SwipeableDrawer默认都自带滚动锁定逻辑：打开时会自动修改body的overflow属性、添加padding-right补偿滚动条消失后的宽度差，两层逻辑重复执行就会导致宽度计算错误，触发短暂滚动条、布局偏移
• 给Modal容器添加的transform: translateY(0)会改变内部position: fixed元素的定位参考系——原本fixed元素是相对于视口定位，加了transform后会变成相对于该Modal容器定位，而SwipeableDrawer默认的定位、滑入滑出动画都是基于视口计算的，参考系错配就会导致动画全程触发页面重排，出现持续抖动。

按以下步骤调整即可实现和Modal外使用SwipeableDrawer完全一致的流畅效果，不需要硬写overflow: hidden做粗糙兼容。

1. 移交滚动控制权给内层Drawer #

直接关闭外层Modal的自带滚动锁定逻辑，避免两层滚动控制冲突，这一步直接解决滚动条闪现问题：

<Modal
  // 关闭Modal默认的滚动锁，所有滚动控制交给内层的SwipeableDrawer
  disableScrollLock={true}
  // 保留之前修复基础定位的transform样式
  sx={{
    transform: 'translateY(0)',
  }}
>
  {/* 原有Modal内容 */}
</Modal>

2. 修正Drawer的定位与挂载逻辑 #

调整SwipeableDrawer的配置，让它的定位、动画计算和当前的参考系匹配，从根源解决动画抖动：

<SwipeableDrawer
  // 关闭默认的Portal挂载，让Drawer直接渲染在Modal节点下，匹配定位上下文
  disablePortal={true}
  // 修改抽屉纸张的定位方式，适配Modal的transform参考系
  PaperProps={{
    sx: {
      position: 'absolute',
      // 如果用的是底部滑出抽屉，添加以下三行固定位置，和默认fixed定位效果一致
      bottom: 0,
      left: 0,
      right: 0,
    }
  }}
  // 保留原有open、onOpen、onClose等业务属性
>
  {/* 原有Drawer内容 */}
</SwipeableDrawer>

3. （可选兜底）统一容器高度 #

如果Modal内容没有占满视口，给Modal的最外层容器添加height: 100vh，确保Drawer的滑动范围和视口尺寸完全对齐，体验和非嵌套场景完全无差别。

核心原则：嵌套多层弹出组件时，永远只保留最内层弹出组件的滚动锁定逻辑，多层滚动锁同时生效必然会导致布局偏移、抖动问题。

内容的提问来源于stack exchange，提问作者Daniel Turuș