有许多可能的方法，作为一个基本的例子，也许尝试添加一个容器与flex: 1的两侧的标志。
这应该总是把标志推到Toolbar的中心，但仍然保持按钮和标题在它的开始，因为它似乎是理想的结果。
示例：

import * as React from "react";
import { styled, useTheme } from "@mui/material/styles";

import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";

import logo from "./../assets/images/logo_white.svg";
import Box from "@mui/material/Box";
import MoreIcon from "@mui/icons-material/MoreVert";
const drawerWidth = 240;

interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar =
  styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== "open",
  }) <
  AppBarProps >
  (({ theme, open }) => ({
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    ...(open && {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: `${drawerWidth}px`,
      transition: theme.transitions.create(["margin", "width"], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
    }),
  }));

export default function AppBar({ open, onDrawerOpen }: any) {
  const theme = useTheme();

  return (
    <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
      <Toolbar>
        <Box sx={{ display: "flex", alignItems: "center", flex: "1" }}>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={onDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            TITLE
          </Typography>
        </Box>
        <Box
          component="img"
          sx={{
            height: 32,
          }}
          alt="MyLogo"
          src={logo}
        />
        <Box sx={{ flex: "1" }}></Box>
      </Toolbar>
    </AppBar>
  );
}

您需要将IconButton和Typography打包到一个Box中，并将其display设置为absolute。然后您可以使用flex属性管理徽标。

export default function AppBarr({ open, onDrawerOpen }: any) {
  const theme = useTheme();

  return (
    <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
      <Toolbar sx={{ justifyContent: "center" }}>
        <Box
          sx={{
            position: "absolute",
            display: "flex",
            alignItems: "center",
            right: "20px",
          }}
        >
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={onDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            TITLE
          </Typography>
        </Box>

        <Box
          component="img"
          sx={{
            height: 32,
          }}
          alt="MyLogo"
          src={logo}
        />
      </Toolbar>
    </AppBar>
  );
}

This是一个很好的资源，可以学习您可以采取的所有方法。