#javascript #css #reactjs #material-ui
Вопрос:
Я использую меню MUI для открытия и закрытия меню при нажатии на выбор профиля, проблема в том, что если вы включите «Полосу прокрутки» в настройках компьютера и нажмете на значок, он сдвинется влево по размеру полосы прокрутки.
Есть идеи, как остановить это «прыгающее» поведение при нажатии на значок меню?
Спасибо!
Перед открытием меню После открытия
Это то, что у меня есть в файле .tsx:
<> <button ref={anchorRef} className={styles.LogoutButton} aria-controls={'menu'} onClick={handleOpenAccount}> <AssignmentIndOutlinedIcon style={{ width: 28, height: 28, color: Colors.Grey700 }}/> </button> <Menu id={'menu'} anchorEl={anchorRef.current} open={Boolean(openMenu)} onClose={handleCloseAccount} > <div className={styles.container}> <MenuList className={styles.nameField}>{`${user?.firstName} ${user?.lastName}`}</MenuList> <MenuList className={styles.emailField}>{user?.email}</MenuList> <Divider className={styles.divider} variant={'fullWidth'}/> <MenuItem className={styles.menuItem} onClick={redirectToUserAccount}> <Text className={styles.text}>{strings.view_account}</Text> </MenuItem> <MenuItem className={styles.menuItem} onClick={logoutClick}> <Text className={styles.text}>{strings.log_out}</Text> </MenuItem> </div> </Menu> </> и CSS:
.container { padding: p.$SPACING p.$SPACING * 1.5 p.$SPACING p.$SPACING * 3; text-align: end; .nameField { margin-top: p.$SPACING * 1.5; font-size: large; } .emailField { color: p.$GREY; margin-top: p.$SPACING; font-size: medium; } .divider { margin-top: p.$SPACING * 2; margin-bottom: p.$SPACING; } .menuItem { padding-right: 5px; border-radius: 5px; justify-content: flex-end; .text { line-height: p.$SPACING * 2; } } }