相关疑难解决方法(0)

我在项目中使用 Material-UI 和 React-window。我的问题是，当该元素位于反应窗口虚拟化列表中时，material-ui 菜单组件不会锚定到所提供的元素。该菜单将出现在屏幕的左上角，而不是固定在打开它的按钮上。当在非虚拟化列表中使用它时，它会按预期工作。菜单正确地锚定到打开它的按钮。

这是一个沙箱示例。沙箱非常具体于我如何使用相关组件。

有关如何解决此问题的任何指导吗？

我正在实现一个当用户单击头像时打开的菜单。问题是菜单呈现在完全不同的位置：

头像是右侧绿色的“OB”按钮。没有控制台错误并检查Popover元素，它正在接收道具anchorEl：

头像右侧的语言菜单渲染得很好，在应该打开的地方打开。我的代码看起来不错，我真的不知道为什么这个位置是错误的：

export function DashboardNavbar({ setDrawer }) {
    // translation hook
    const { i18n } = useTranslation("navbar");

    // config drawer state
    const [configDrawer, setConfigDrawer] = useState(false);

    // config menu state
    const configMenuState = usePopupState({
        variant: "popover",
        popupId: "configMenu"
    });

    // avatar id
    const [cookie] = useCookies("userInfo");
    const decodedToken = decodeToken(cookie.userInfo.token);
    const avatarId =
        decodedToken.firstName.charAt(0) + decodedToken.lastName.charAt(0);

    function DesktopNavbar() {
        return (
            <>
                <StyledDashboardNavbar>
                    <Container maxWidth="lg">
                        <div
                            style={{
                                display: "flex",
                                justifyContent: "flex-end"
                            }}
                        >
                            <Avatar
                                style={{ …