如何在Material UI响应式导航栏小屏幕时居中自定义图片Logo

将Material UI响应式App Bar模板中的AdbIcon替换为自定义图片后，小屏幕下Logo无法居中，以下是修复方案：

问题根源 #

原模板针对不同屏幕尺寸（xs/md）设计了Logo的显示逻辑，但自定义图片未适配该逻辑，直接放置在Toolbar最前方，未设置响应式布局属性，导致小屏幕下无法居中。

修复步骤 #

1. 移除原模板中AdbIcon和Typography形式的Logo代码
2. 为自定义图片容器添加响应式样式，实现小屏幕居中、大屏幕靠左的效果
3. 调整图片尺寸，避免破坏App Bar布局

修改后的完整代码 #

import { useState } from "react";
import { Fragment } from "react";
import { Outlet, Link } from "react-router-dom";

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import Container from "@mui/material/Container";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import MenuItem from "@mui/material/MenuItem";
import "./navigation-bar.styles.scss";

const pages = ["Page 1", "Page 2", "Page 3"];
const settings = ["Profile", "My purchases", "Logout"];

const NavigationBar = () => {
  const [anchorElNav, setAnchorElNav] = useState(null);
  const [anchorElUser, setAnchorElUser] = useState(null);

  const handleOpenNavMenu = (event) => {
    setAnchorElNav(event.currentTarget);
  };
  const handleOpenUserMenu = (event) => {
    setAnchorElUser(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  const handleCloseUserMenu = () => {
    setAnchorElUser(null);
  };

  return (
    <Fragment>
      <AppBar position="fixed">
        <Container maxWidth="xl">
          <Toolbar disableGutters>
            {/* 自定义响应式Logo */}
            <Link 
              to="/" 
              sx={{ 
                flexGrow: { xs: 1, md: 0 },
                display: 'flex',
                justifyContent: { xs: 'center', md: 'flex-start' },
                mr: { md: 2 }
              }}
            >
              <img
                className="nav-logo"
                src="https://cdn.dribbble.com/userupload/3158903/file/original-3f5abe8b99ff4ba4626ddf6660115182.jpg?compress=1&resize=752x"
                alt="Porousway Logo"
                style={{ height: 40, width: "auto" }}
              />
            </Link>

            {/* 小屏幕菜单按钮 */}
            <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
              <IconButton
                size="large"
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleOpenNavMenu}
                color="inherit"
              >
                <MenuIcon />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorElNav}
                anchorOrigin={{
                  vertical: "bottom",
                  horizontal: "left",
                }}
                keepMounted
                transformOrigin={{
                  vertical: "top",
                  horizontal: "left",
                }}
                open={Boolean(anchorElNav)}
                onClose={handleCloseNavMenu}
                sx={{
                  display: { xs: "block", md: "none" },
                }}
              >
                {pages.map((page) => (
                  <MenuItem key={page} onClick={handleCloseNavMenu}>
                    <Typography textAlign="center">{page}</Typography>
                  </MenuItem>
                ))}
              </Menu>
            </Box>

            {/* 大屏幕导航按钮 */}
            <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
              {pages.map((page) => (
                <Button
                  key={page}
                  onClick={handleCloseNavMenu}
                  sx={{ my: 2, color: "white", display: "block" }}
                >
                  {page}
                </Button>
              ))}
            </Box>

            {/* 用户菜单 */}
            <Box sx={{ flexGrow: 0 }}>
              <Tooltip title="Open settings">
                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                  <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
                </IconButton>
              </Tooltip>
              <Menu
                sx={{ mt: "45px" }}
                id="menu-appbar"
                anchorEl={anchorElUser}
                anchorOrigin={{
                  vertical: "top",
                  horizontal: "right",
                }}
                keepMounted
                transformOrigin={{
                  vertical: "top",
                  horizontal: "right",
                }}
                open={Boolean(anchorElUser)}
                onClose={handleCloseUserMenu}
              >
                {settings.map((setting) => (
                  <MenuItem key={setting} onClick={handleCloseUserMenu}>
                    <Typography textAlign="center">{setting}</Typography>
                  </MenuItem>
                ))}
              </Menu>
            </Box>
          </Toolbar>
        </Container>
      </AppBar>

      <Outlet />
    </Fragment>
  );
};

export default NavigationBar;

关键逻辑说明 #

通过给Logo的Link容器设置MUI响应式sx属性：

• 小屏幕（xs）下设置flexGrow:1和justifyContent:center，让Logo占据剩余空间并居中
• 大屏幕（md）下设置flexGrow:0和justifyContent:flex-start，保持Logo靠左，同时添加右侧间距和原模板逻辑对齐

这样既实现了小屏幕Logo居中的需求，又保留了原模板的响应式菜单功能。

内容的提问来源于stack exchange，提问作者chu-js