我将我的验证按钮添加到我的网站上的材料菜单中,事实证明这很痛苦。我将菜单固定在右侧,因此它与我的登录按钮的右下角对齐,并向左扩展。但是,Google按钮在应用程序登录后的iFrame中调整了自身的大小,并且由于材料菜单锚定为左位置,因此调整了右侧的大小。
i我尝试将按钮对齐
li
右侧的按钮,但这并不能阻止菜单向右调整大小.
我还尝试使用该组件上的样式覆盖。设置
top
CSS样式部分有效,但是材料坚持设置
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),
},
},
}}
>

ResizeObserver
相比,这种解决方案非常不一致,而且性能较低,因此,如果有办法这样做,我仍在寻找答案。