Javascript 无法在应用程序栏材质界面下对齐排版

我正在构建AppBar组件， 我需要菜单按钮左对齐，文本在中间，但我根本做不到

已经尝试过这个解决方案

我试过很多东西，包括网格、填充（愚蠢的解决方案）等等

这就是不一致

import React from 'react';


const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  link: {
    margin: theme.spacing(1),
    color:"inherit",
    variant:"h8"
  },
  text:{

  },



}));

export default function CustomAppBar(logged) {

  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);



  function handleMenu(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static" className={classes.appBar}>
        <Toolbar>

          <IconButton
                aria-label="Meny=u"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={open}
                onClose={handleClose}
              >
                <MenuItem onClick={()=> {window.location = "/Carrier/Home"}}><Typography className={classes.link}>Balance</Typography></MenuItem>
                <MenuItem onClick={()=> {window.location = "/Document/Send"}}><Typography className={classes.link}>Send Document</Typography></MenuItem>
                <MenuItem onClick={()=> {window.location = "/Carrier/AddTravel"}}><Typography className={classes.link}>New Travel</Typography></MenuItem>
                <MenuItem onClick={()=> {window.location = "/Carrier/Balance"}}><Typography className={classes.link}>Balance</Typography></MenuItem>
              </Menu>
          <Typography variant="h5" color="inherit" className={classes.text}>
            Text
          </Typography> 

        </Toolbar>
      </AppBar>
    </div>
  );
} 

从“React”导入React；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
链接：{
边距：主题。间距（1），
颜色：“继承”，
变体：“h8”
},
正文：{
},
}));
导出默认功能CustomAppBar（已记录）{
const classes=useStyles（）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量开=布尔值（主播）；
功能手柄菜单（事件）{
Setancorel（事件当前目标）；
}
函数handleClose（）{
setAnchorEl（空）；
}
返回(
{window.location=“/Carrier/Home”}>余额
{window.location=“/Document/Send”}>发送文档
{window.location=“/Carrier/AddTravel”}>新旅行
{window.location=“/Carrier/Balance”}>Balance
正文
);
} 

---

没有错误消息，文本只是不对齐

为标题文本提供100%的宽度，并将文本对齐到中心。如下图所示

import React from 'react';


const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  link: {
    margin: theme.spacing(1),
    color:"inherit",
    variant:"h8"
  },
  text:{

  },



}));

export default function CustomAppBar(logged) {

  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);



  function handleMenu(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static" className={classes.appBar}>
        <Toolbar>

          <IconButton
                aria-label="Meny=u"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={open}
                onClose={handleClose}
              >
                <MenuItem onClick={()=> {window.location = "/Carrier/Home"}}><Typography className={classes.link}>Balance</Typography></MenuItem>
                <MenuItem onClick={()=> {window.location = "/Document/Send"}}><Typography className={classes.link}>Send Document</Typography></MenuItem>
                <MenuItem onClick={()=> {window.location = "/Carrier/AddTravel"}}><Typography className={classes.link}>New Travel</Typography></MenuItem>
                <MenuItem onClick={()=> {window.location = "/Carrier/Balance"}}><Typography className={classes.link}>Balance</Typography></MenuItem>
              </Menu>
          <Typography variant="h5" color="inherit" className={classes.text}>
            Text
          </Typography> 

        </Toolbar>
      </AppBar>
    </div>
  );
} 

text: {
    width: "100%",
    textAlign: "center"
}

---

这应该可以做到。

您可以在任何在线ide（如JSFIDLE或codepen）中共享您的工作代码吗？