如何锚定反应材料弹出/菜单,而不是左

问题描述 投票:0回答:1

我将我的验证按钮添加到我的网站上的材料菜单中,事实证明这很痛苦。我将菜单固定在右侧,因此它与我的登录按钮的右下角对齐,并向左扩展。但是,Google按钮在应用程序登录后的iFrame中调整了自身的大小,并且由于材料菜单锚定为左位置,因此调整了右侧的大小。

i我尝试将按钮对齐

li

右侧的按钮,但这并不能阻止菜单向右调整大小.
我还尝试使用该组件上的样式覆盖。设置topCSS样式部分有效,但是材料坚持设置
left
无论我尝试覆盖
right
还是

left

,因此它不允许菜单垂直调整大小。 我正在尝试使用ref对菜单纸滚动宽度进行设置

null
,但是相对于
undefined
的ref是
left
,所以我必须更多地研究。
null

问题的示例(菜单的右边缘应与登录按钮的右边缘对齐):

    
我想共享一个有点刺的解决方法 - 使用问题按钮上的

useEffect
,我能够根据右侧和结果宽度有效地强制左位(
Reference

)。 我想强调,与简单使用

isMenuOpen

而不是<Menu id='login-menu' ref={menuRef} disableAutoFocusItem disableScrollLock={true} anchorEl={menuAnchorEl} anchorOrigin={{ vertical: 'bottom', horizontal: 'right', }} transformOrigin={{ vertical: 'top', horizontal: 'right', }} open={isMenuOpen} onClose={() => setMenuAnchorEl(undefined)} MenuListProps={{ 'aria-labelledby': 'login-button', style: { padding: 0 }, }} slotProps={{ root: { style: { display: 'contents' }, }, paper: { ref: menuPaperRef, style: { left: (menuAnchorEl?.getBoundingClientRect().right ?? window.innerWidth) - (menuPaperRef.current?.scrollWidth ?? 0), right: window.innerWidth - (menuAnchorEl?.getBoundingClientRect().right ?? 0), }, }, }} > offset menu positionResizeObserver

相比,这种解决方案非常不一致,而且性能较低,因此,如果有办法这样做,我仍在寻找答案。
reactjs react-hooks material-ui
1个回答
0
投票

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.