如何在 Material UI 中居中？答案

【问题标题】：How can I center something in Material UI?如何在 Material UI 中居中？
【发布时间】：2019-10-09 11:23:32
【问题描述】：

所以我的 Header 有一个 AppBar 组件，我想在 AppBar 中居中显示标题。如您所见，我将在左侧有一个按钮，在右侧有一个按钮。我会让这些按钮分别拥抱左边和右边。

const styles = {
  root: {
    flexGrow: 1
  }
};

class Header extends Component {
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <LeftButton />
            <Typography variant="h4" color="inherit">
              Title
            </Typography>
            <RightButton />
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

将标题居中的方法是什么？

我最初的想法是创建一个三列网格，然后将第一列左对齐，第二列居中对齐，第三列右对齐。

另一种可能性是给标题 FlexGrow 属性，然后将 text-align 设置为居中，但这种方法的问题是，如果左侧和右侧的内容不相等，它会稍微偏离中心。

【问题讨论】：

寻求“最佳”方式并不是在 Stack Overflow 上提问的最佳方式 :)。我已经编辑了您的问题，只是要求一种方法，这不是题外话。

标签： reactjs material-ui

【解决方案1】：

您可以使用 MaterialUI 导出的withStyles() 将一些 CSS 放入组件中。

而且，他们有一个创建AppBar 的示例，我想会有所帮助！我编辑并制作this。

在原始代码中，在“增长”类中，我删除了flexGrow: 1 并放入了margin: "auto"

【讨论】：