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 实例都使用工具栏。我发现可以解决此问题的所有解决方案都是 outdated 和 don't work（不再有 ToolbarGroup 这样的东西）。

我也尝试过使用 const 样式并使用 Styles() 导出 AppBar：

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 component 被设置为将其子项呈现为弹性项目。

text-align 之类的 CSS 属性用于水平对齐显示不同于弹性项目的子项，例如作为表格单元格、块或内联块。

Flex 项目可以使用justify-content or align-self CSS Property or more other ones 水平居中。

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

Answer 2

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， 可以解决问题，并且在移动设备中也能响应