Material-UI版式不在AppBar中居中

Question

我正在尝试在AppBar中将文本居中。我试过使用align =“ center”，textAlign =“ center”和style = {{align：“ center”}}等在Typography元素中居中放置文字：

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的高度，但我也没有找到一种方法。另外，我见过的AppBar的每个实例都使用工具栏。我发现可以解决此问题的所有解决方案都已过时，无法正常工作（不再有ToolbarGroup这样的东西）。

我也尝试过使用const样式，并导出AppBar withStyles（）：

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

该AppBar组件的样式呈现其孩子弯曲的物品。

CSS属性（例如text-align）用于子元素的水平对齐，该子元素的显示与灵活项目不同，例如表单元格，块或行内块。

可使用justify-content或align-selfCSS属性或其他更多属性将Flex项目水平居中。

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>
  );
}