React+MUI表格行悬浮Popover滚动条消除及左右阴影添加问题

一、消除Popover动画触发的水平滚动条 #

问题根源是Popover滑入动画过程中，元素超出表格容器可视范围，触发了水平滚动。提供两种可行方案：

方案1：裁剪容器超出部分 #

给TableContainer添加overflowX: 'clip'样式，直接裁剪超出容器的内容，不会出现滚动条：

<TableContainer sx={{ maxHeight: 440, overflowX: 'clip' }} component={Paper}>
  {/* 表格内容 */}
</TableContainer>

方案2：调整Popover定位逻辑 #

将Popover从单元格内移出，基于表格行的DOM元素定位，避免影响表格布局。修改代码如下：

// 引入useRef和useState
import { useRef, useState } from 'react';

// 为TableRow添加ref获取DOM元素
const rowRef = useRef<HTMLTableRowElement>(null);
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

// 处理hover事件
const handleMouseEnter = () => {
  setAnchorEl(rowRef.current);
};
const handleMouseLeave = () => {
  setAnchorEl(null);
};

// 渲染TableRow
<TableRow ref={rowRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
  {/* 单元格内容 */}
</TableRow>

// 配置Popover
<Popover
  open={Boolean(anchorEl)}
  anchorEl={anchorEl}
  onClose={handleMouseLeave}
  placement="right"
  disableScrollLock
  sx={{
    '& .MuiPopover-paper': {
      animation: 'slideIn 0.3s ease-out',
      '@keyframes slideIn': {
        '0%': { transform: 'translateX(20px)', opacity: 0 },
        '100%': { transform: 'translateX(0)', opacity: 1 }
      }
    }
  }}
>
  {/* Popover内容 */}
</Popover>

二、为表格行添加左右阴影 #

默认TableRow的display: table-row属性会限制阴影显示，需先修改行的定位属性，再添加左右方向的阴影样式：

<TableRow
  sx={{
    position: 'relative',
    '&:hover': {
      boxShadow: '0 2px 4px rgba(0,0,0,0.1), 2px 0 4px rgba(0,0,0,0.05), -2px 0 4px rgba(0,0,0,0.05)',
      zIndex: 1 // 避免阴影被相邻行遮挡
    }
  }}
>
  {/* 单元格内容 */}
</TableRow>

若需要阴影始终显示，直接将样式移到TableRow的基础sx配置中即可。

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