如何修复Material UI AppBar中组件的对齐问题？

问题描述 #

开发React应用时，Material-UI AppBar中的logo图片、标题和登录按钮无法实现无缝直线对齐，需要调整布局与样式解决该问题。

问题分析 #

1. 布局结构不合理：当前代码将brandContainer（logo+标题）与Toolbar（登录/用户区域）作为AppBar的同级元素，导致两个区域的垂直对齐基准不一致。
2. 样式钩子使用错误：makeStyles回调中直接调用useTheme()钩子，违反React钩子的使用规则，会引发运行时错误。
3. flex布局属性未充分利用：未在统一的flex容器内管理所有元素，导致对齐逻辑混乱。

解决方案 #

1. 调整组件结构 #

将brandContainer移入Toolbar内部，让所有元素处于同一个flex容器中，利用Toolbar的默认布局能力实现精准对齐。

2. 修正样式逻辑 #

• 移除AppBar上多余的flex配置，让Toolbar作为核心布局容器。
• 利用makeStyles回调自带的theme参数替代直接调用useTheme()。
• 优化flex属性，确保所有元素垂直居中、水平分布合理。

修改后的代码 #

Navbar.js

import { AppBar, Typography, Toolbar, Avatar, Button, Container } from "@mui/material";
import React from "react";
import { Link } from 'react-router-dom'
import useStyles from './styles'
import memories from '../../images/memories.png'

const Navbar = () => {
    const classes = useStyles()
    const user = null;
    return (
        <AppBar className={classes.appBar} position='static' color='inherit'>
            <Container maxWidth="xl">
                <Toolbar className={classes.toolbar}>
                    {/* 品牌区域：logo + 标题 */}
                    <div className={classes.brandContainer}>
                        <img className={classes.image} src={memories} alt="memories" height="50" />
                        <Typography variant='h4' nowrap className={classes.heading}>Travel Blog</Typography>
                    </div>
                    {/* 用户操作区域 */}
                    {user ? (
                        <div className={classes.profile}>
                            <Avatar className={classes.purple} alt={user.result.name} src={user.result.imageUrl}>
                                {user.result.name.charAt(0)}
                            </Avatar>
                            <Typography className={classes.userName} variant='h6'>{user.result.name}</Typography>
                            <Button variant="contained" className={classes.logout} color="secondary">Logout</Button>
                        </div>
                    ) : (
                        <Button component={Link} className={classes.login} to='/auth' variant="contained" color="primary"> Sign In</Button>
                    )}
                </Toolbar>
            </Container>
        </AppBar>
    )
}

export default Navbar

Styles.js

import { makeStyles } from "@mui/styles";
import { deepPurple } from "@mui/material/colors";

export default makeStyles((theme) => ({
  appBar: {
    borderRadius: 15,
    margin: '30px 0',
    padding: '10px 50px',
  },
  heading: {
    color: 'rgba(0,183,255, 1)',
    textDecoration: 'none',
    marginLeft: '15px',
  },
  image: {
    height: '50px',
  },
  toolbar: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  profile: {
    display: 'flex',
    alignItems: 'center',
    gap: '15px',
  },
  userName: {
    whiteSpace: 'nowrap',
  },
  brandContainer: {
    display: 'flex',
    alignItems: 'center',
  },
  purple: {
    color: theme.palette.getContrastText(deepPurple[500]),
    backgroundColor: deepPurple[500],
  },
}));

效果说明 #

• 所有元素统一在Toolbar容器内，通过justify-content: space-between实现左右分布，align-items: center保证垂直方向完全对齐。
• 修复了useTheme的使用错误，利用makeStyles回调的theme参数实现动态颜色对比。
• 优化了元素间距，让logo与标题、用户操作区域的布局更紧凑合理。

内容的提问来源于stack exchange，提问作者LOKESH R