如何在Material UI AppBar中实现响应式居右的登录/登出按钮

解决方案 #

核心是使用flex布局的自动边距实现自适应居右，替换固定百分比的强制样式：

第一步：修改styles.js样式

1. 调整menu类样式，删除固定百分比边距，改为自动边距：

menu: {
  marginRight: "-30px",
  marginLeft: "auto", // 替换原来的marginLeft: "80%"
},

2. 新增右侧内容容器样式：

rightSection: {
  marginLeft: 'auto',
  display: 'flex',
  alignItems: 'center',
  gap: '20px' // 可以根据需要调整元素间距
},

3. 可删除logout、login类下的marginLeft: '20px'属性，避免和新增的容器样式冲突。

第二步：调整Navbar.js结构

用新增的rightSection类包裹所有需要居右的登录/登出模块：

<Hidden xsDown>
  {/* 原有导航链接渲染代码保持不变 */}
  {navigationLinks.map((item) => (
    <Link className={classes.links}
      variant="button"
      underline="none"
      href={item.href}>
      {item.name}
    </Link>
  ))}
  {/* 新增外层容器包裹登录/登出模块 */}
  <div className={classes.rightSection}>
    {user?.result ? (
      <div className={classes.logout}>
        {/* 原有登出模块代码不需要修改 */}
      </div>
    ) : (
      <div className={classes.login}>
        {/* 原有登录模块代码不需要修改 */}
      </div>
    )}
  </div>
</Hidden>
{/* 小屏菜单因为已经设置marginLeft: auto，会自动居右，不需要额外修改结构 */}
<Hidden smUp>
  <IconButton className={classes.menu}>
    <MenuIcon onClick={() => setOpen(true)} />
  </IconButton>
</Hidden>

修改完成后，所有右侧元素都会自动适配不同分辨率，始终停靠在AppBar最右侧，不会出现错位或溢出问题。flex布局中margin-left: auto会自动填充元素左侧的所有剩余空白空间，不需要固定数值即可实现自适应对齐。

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