Question

因此，我的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设置为居中，但是这种方法的问题是，如果左侧和右侧的内容不相等，则将稍微偏离中心。

Answer 1

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

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

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

如何在Material UI中居中放置某些内容？

1 个答案: