屏幕缩放或出现滚动条时MUI Popover与图标错位问题求助

问题根源 #

你当前通过百分比固定箭头位置，这种方式依赖Popover容器的宽度，当屏幕缩放、滚动导致Popover位置或尺寸变化时，百分比计算的位置会偏离锚点图标，从而出现对齐错位。

方案一：使用MUI内置Arrow组件（推荐） #

MUI v5及以上提供了内置的Arrow组件，能自动锚定到触发元素，无需手动计算位置，彻底解决对齐问题。

步骤：

1. 导入Arrow组件

import Arrow from '@mui/material/Arrow';

2. 修改Popover配置，移除自定义箭头Box，在slotProps中添加内置Arrow：

<Popover
  open={avatarMenuOpen}
  anchorEl={anchorEl}
  onClose={handleAvatarMenuClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'center'
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'center'
  }}
  slotProps={{
    paper: {
      sx: {
        backgroundColor: 'white',
        minWidth: '317px',
        boxShadow: '0px 4px 18px rgba(97, 97, 97, 0.1)',
        position: 'relative',
        mt: 1, // 调整和锚点的间距
      },
      arrow: <Arrow sx={{
        color: 'white',
        border: `1px solid ${palette.grey[200]}`,
        '&::before': {
          borderColor: `${palette.grey[200]} transparent transparent ${palette.grey[200]}`,
        }
      }} />
    }
  }}
>
  <Box sx={{ p: 2 }}>
    <MenuItem
      component={ReactRouterLink}
      onClick={handleAvatarMenuClose}
      to={'/my-profile'}
    >
      <AirplanemodeActive color='error' />
      <Typography sx={{ paddingLeft: '12px' }}>Location 1</Typography>
    </MenuItem>
    <MenuItem onClick={handleLogOut}>
      <AirplanemodeActive color='primary' />
      <Typography sx={{ paddingLeft: '12px' }}>Location 2 </Typography>
    </MenuItem>
  </Box>
</Popover>

方案二：修复自定义箭头的定位逻辑 #

如果必须保留自定义箭头，需要动态获取锚点元素的位置，计算箭头在Popover中的偏移量：

1. 添加状态存储锚点位置，并在打开Popover时获取：

const [arrowOffset, setArrowOffset] = useState(0);

const handleAvatarMenuOpen = (event) => {
  setAnchorEl(event.currentTarget);
  setAvatarMenuOpen(true);
  // 获取锚点元素的位置信息
  const anchorRect = event.currentTarget.getBoundingClientRect();
  // 延迟获取Popover容器位置，确保DOM已渲染
  setTimeout(() => {
    const popoverRect = document.querySelector('.MuiPopover-paper').getBoundingClientRect();
    // 计算箭头相对于Popover容器的偏移量
    setArrowOffset(anchorRect.left + anchorRect.width / 2 - popoverRect.left - 6);
  }, 0);
};

2. 修改自定义箭头的定位，用动态计算的偏移量代替百分比：

<Box
  sx={{
    position: 'relative',
    mt: '10px',
    '&::before': {
      backgroundColor: 'white',
      content: '""',
      display: 'block',
      position: 'absolute',
      width: 12,
      height: 12,
      top: -6,
      left: `${arrowOffset}px`,
      transform: 'rotate(45deg)',
      borderTop: `1px solid ${palette.grey[200]}`,
      borderLeft: `1px solid ${palette.grey[200]}`
    }
  }}
/>

额外优化建议 #

• 移除backgroundColor: 'transparent'，直接将内容Box的样式合并到paper中，减少层级嵌套
• 避免使用!important，改用MUI的样式优先级规则覆盖默认样式

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