Материал-UI Типография не в центре AppBar

Question

Я пытаюсь центрировать текст в панели приложений.Я попытался центрировать текст в элементе Typography, используя align = "center", textAlign = "center" и style = {{align: "center"}}, среди прочего:

class App extends React.Component {
  render() {
    return (
      <div>
        <AppBar>
          <Toolbar>
            <Typography
              variant="h6"
              color="inherit"
              style={{ align: "center" }}
            >
              Header
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.... но это не работает, если я не удаляю панель инструментов.Но тогда мне придется вручную изменить высоту панели приложений, что я также не нашел способ сделать.Кроме того, каждый экземпляр AppBar, который я видел, использует панель инструментов.Все найденные мной решения, которые могли бы решить эту проблему, устарели и не работают (больше нет такой вещи, как ToolbarGroup).

I 'Мы также пытались использовать стили const и экспортировать AppBar с помощью Style ():

const styles = {
  root: {
    flexGrow: 1
  },
  typography: {
    align: "center"
  }
};

function Header(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <AppBar>
        <Toolbar>
          <Typography
            variant="h6"
            color="inherit"
            className={classes.typography}
          >
            Header
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Header.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Header);

, но это также не работает.Я думаю, это должно быть просто, я не уверен, что мне не хватает.

Answer 1

const styles = {
  root: {
    flexGrow: 1
  },
  typography: {
flexGrow: 1,
    align: "center"
  }
};

function Header(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <AppBar>
        <Toolbar>
          <Typography
            variant="h6"
            color="inherit"
            className={classes.typography}
          >
            Header
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Header.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Header);

использует flexGrow, сделает свое дело и отзывчив в мобильном телефоне

Answer 2

Компонент AppBar предназначен для визуализации его дочерних элементов в виде гибких элементов.

Свойство CSS, например text-align , используется для горизонтального выравнивания отображаемых дочерних элементов.отличается от элемента flex, например, в качестве ячейки таблицы, блока или встроенного блока.

Элементы Flex можно центрировать по горизонтали, используя свойство CSS justify-content или align-self или несколько других .

const styles = {
  root: {
    flexGrow: 1,
  },
  appbar: {
    alignItems: 'center',
  }
};

function Header(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <AppBar
        className={classes.appbar}
        color="default"
        position="static"
      >
        <!--...-->
      </AppBar>
    </div>
  );
}