Не могу выровнять типографику под интерфейсом панели приложений

Question

Я создаю компонент 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>
  );
} 

сообщений об ошибках нет, текст просто не выравнивается

Answer 1

Дайте тексту заголовка 100% ширины и выровняйте его по центру. Как показано ниже.

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

Это должно сработать.