求助：Material-ui-next中GridList Tile添加Popover后样式失效且弹窗不显示

我之前刚好碰到过一模一样的情况！在Material UI的横向滚动GridList里加Popover确实容易踩几个隐性的坑，下面是我当时调试出来的解决方案：

1. 修复Popover的容器定位，避免干扰GridList布局 #

Popover默认会将弹窗元素挂载到body或者全局容器，这可能会打乱GridList的横向滚动上下文。解决办法是把Popover的container属性指定为当前的GridListTile元素，让它的定位完全依附于tile：

import { useState, useRef } from 'react';
import { GridList, GridListTile, Popover, Typography } from '@mui/material';

function HorizontalGridListWithPopover() {
  const [open, setOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const tileRef = useRef(null);

  const handleTileClick = (event) => {
    setAnchorEl(event.currentTarget);
    setOpen(true);
  };

  const handlePopoverClose = () => {
    setOpen(false);
    setAnchorEl(null); // 重置锚点元素，避免下次触发异常
  };

  return (
    <div style={{ overflowX: 'auto', width: '100%', padding: '16px 0' }}>
      <GridList cols={2} spacing={16} style={{ flexWrap: 'nowrap', transform: 'translateZ(0)' }}>
        <GridListTile 
          ref={tileRef} 
          onClick={handleTileClick} 
          style={{ cursor: 'pointer', position: 'relative' }}
        >
          <img src="/your-image.jpg" alt="Tile content" style={{ width: '100%', height: 'auto' }} />
          <Popover
            container={tileRef.current}
            open={open}
            anchorEl={anchorEl}
            onClose={handlePopoverClose}
            anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
          >
            <Typography sx={{ p: 2 }}>这是Tile对应的Popover内容</Typography>
          </Popover>
        </GridListTile>
        {/* 更多Tile项... */}
      </GridList>
    </div>
  );
}

2. 确认Popover的触发逻辑无错误 #

很多时候Popover不显示是因为触发逻辑的细节没处理好：

• 用event.currentTarget绑定锚点元素，而不是event.target——避免点击到Tile内部的图片/文字时，锚点指向错误的元素
• 关闭Popover时记得重置anchorEl为null，防止下次触发时定位混乱

3. 确保GridList的横向滚动样式不被覆盖 #

检查GridList的父容器和自身样式配置：

• 父容器必须设置overflowX: 'auto'，保证横向滚动功能生效
• GridList要添加flexWrap: 'nowrap'强制横向排列，transform: 'translateZ(0)'可以优化滚动时的性能表现
• 给GridListTile加上position: 'relative'，让Popover的绝对定位基于Tile本身计算

如果尝试以上方法后仍有问题，可以检查是否有其他全局样式（比如overflow、z-index）干扰了GridList或Popover的布局，逐步排查就能解决啦。

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