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 styles 並使用 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組件的樣式設計為將其子項呈現為彈性項目。

像text-align這樣的CSS屬性用於顯示與flex項不同的子項的水平對齊，例如表格單元格，塊或內聯塊。

Flex項目可以使用justify-content或align-self CSS屬性或更多其他屬性水平居中。

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，可以做到這一點，並在移動設備中也做出響應

Answer 3

添加以下內容幫助我將我的標題放在移動設備上：

<Box sx={{ flexGrow: 0 }}>
    <Box style={{ width: '40px', height: '40px' }}></Box>
</Box>