如何覆盖Ant Design抽屉组件的过渡效果？解决抽屉移位问题

试试这几个实用方案： #

• 自定义层级与强制样式覆盖
  给第二个抽屉设置更高的zIndex，避免和第一个抽屉的层级冲突：

  <Drawer zIndex={10000} title="第二个抽屉" ... />
  

  再在全局或组件样式里强制去掉第一个抽屉的transform偏移：

  .ant-drawer-open .ant-drawer-content-wrapper {
    transform: none !important;
  }
  

• 换用Modal替代第二个抽屉
  如果不是必须用抽屉组件承载内容，直接把第二个弹窗换成Modal，彻底避开抽屉嵌套的样式bug。

• 升级Ant Design版本
  这个老问题在较新的版本中已经被修复，把依赖升级到4.x后期或5.x版本，大概率能直接解决问题。

• 手动控制抽屉显隐状态
  通过状态变量手动管理两个抽屉的显示：打开第二个抽屉时先关闭第一个，关闭第二个后再重新打开第一个（加个延时等待动画结束）：

  const [showFirstDrawer, setShowFirstDrawer] = useState(false);
  const [showSecondDrawer, setShowSecondDrawer] = useState(false);
  
  const openSecondDrawer = () => {
    setShowFirstDrawer(false);
    setTimeout(() => setShowSecondDrawer(true), 300);
  };
  
  const closeSecondDrawer = () => {
    setShowSecondDrawer(false);
    setTimeout(() => setShowFirstDrawer(true), 300);
  };
  

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