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属性用于子元素的水平对齐，该子元素的显示与弹性项目不同，例如作为表格单元格，块或行内块。

可以使用justify-content or align-self CSS Property or more other ones将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>
  );
}

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

Material-UI版式不在AppBar中居中

2 个答案: