Как вертикально центрировать несколько строк в AppBar в Material-UI

Question

Я пытаюсь центрировать несколько элементов / строк по вертикали в AppBar / ToolBar Material-UI, но это не работает

Это то, что у меня есть ...

And this is what I would like...

This is my code...

const useStyles = makeStyles(theme => ({
  appBar: {
    height: 200,
    width: `calc(100% - 200px)`,
    marginLeft: 200
  },
  link: {
    display: "flex",
    color: "white"
  },
  icon: {
    marginRight: theme.spacing(0.5),
    width: 20,
    height: 20
  },
  toolbar: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center"
  },
  drawerPaper: {
    display: "flex",
    width: 200
  }
}));

function App() {
  const classes = useStyles();

  return (
     Платежи  Дом  Отчеты     // Другое 

Я думал, что этот бит подойдет, но, по-видимому, нет

toolbar: {
  display: "flex",
  flexDirection: "column",
  alignItems: "flex-start",
  justifyContent: "center"
},

Песочница кода - здесь

Спасибо,

Answer 1

Думаю, добавление гибкости в appBar со столбцом flexDirection и последующее его центрирование будет работать

 appBar: {
    height: 200,
    width: `calc(100% - 200px)`,
    marginLeft: 200,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center'
  },

Answer 2

Добавьте в свой класс панели инструментов:

alignItems: «flex-start», justifyContent: «center», height: «100%»