如何在MUI Material Popover中使用re-resizable？无效时的替代方案

这种实现方式不可行 #

你把Resizable套在Popover外层的做法无效，原因是MUI的Popover会通过Portal将内容挂载到DOM的独立层级（通常是body下），而re-resizable只能作用于直接子元素的DOM节点，无法穿透Portal控制内部的内容容器。

可行的调整方案 #

方案1：将Resizable套在Popover内部的Paper外层 #

把Resizable放在Popover内部，直接包裹实际承载内容的Paper组件，这样就能正常触发尺寸调整：

return (
  <Popover
    open={!isStoredTabsNull()}
    onClose={handleClose}
    anchorEl={anchorEl}
  >
    <Resizable>
      <Paper
        style={{
          backgroundColor: DefaultStyle.backgroundColor,
          overflow: 'auto'
        }}
      >
        { storedTabs?.map((tabsGroup) => (
          <StoredTabsItem
            key={tabsGroup.id}
            storedTabsGroup={tabsGroup}
            projectFolder={projectFolder}
            openFiles={openFiles}
            overwriteState={overwriteState}
            tabs={tabs}
          />
        ))}
      </Paper>
    </Resizable>
  </Popover>
)

方案2：自定义拖拽逻辑（无需第三方库） #

如果不想依赖re-resizable，可以手动实现拖拽调整：

• 给Paper添加一个拖拽手柄元素（比如右下角的小方块）
• 通过监听鼠标的mousedown、mousemove、mouseup事件，动态修改Paper的宽高状态

示例代码：

import { useState } from 'react';

// 组件内部逻辑
const [popoverSize, setPopoverSize] = useState({ width: 400, height: 500 });
const [isDragging, setIsDragging] = useState(false);

const handleDragStart = (e) => {
  e.preventDefault();
  setIsDragging(true);
};

const handleDragEnd = () => {
  setIsDragging(false);
};

const handleDragMove = (e) => {
  if (isDragging) {
    setPopoverSize(prev => ({
      width: prev.width + e.movementX,
      height: prev.height + e.movementY
    }));
  }
};

return (
  <Popover
    open={!isStoredTabsNull()}
    onClose={handleClose}
    anchorEl={anchorEl}
  >
    <Paper
      style={{
        backgroundColor: DefaultStyle.backgroundColor,
        overflow: 'auto',
        width: popoverSize.width,
        height: popoverSize.height,
        position: 'relative'
      }}
      onMouseMove={handleDragMove}
      onMouseUp={handleDragEnd}
      onMouseLeave={handleDragEnd}
    >
      {/* 拖拽手柄 */}
      <div 
        style={{
          position: 'absolute',
          right: 5,
          bottom: 5,
          width: 15,
          height: 15,
          backgroundColor: '#ccc',
          cursor: 'se-resize'
        }}
        onMouseDown={handleDragStart}
      />
      
      { storedTabs?.map((tabsGroup) => (
        <StoredTabsItem
          key={tabsGroup.id}
          storedTabsGroup={tabsGroup}
          projectFolder={projectFolder}
          openFiles={openFiles}
          overwriteState={overwriteState}
          tabs={tabs}
        />
      ))}
    </Paper>
  </Popover>
)

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