javascript - 如何在Material-UI AppBar中将标题水平居中

我找不到在React Material UI AppBar中将标题居中的方法。也许我缺少了一些东西。 StackOverflow上几乎没有其他答案，但这些答案似乎并不是最好的方法。

最佳答案

使用material-ui makeStyles将文本居中：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  title: {
    flexGrow: 1,
    textAlign: 'center',
  },
}));

然后将“标题”样式应用于标题组件：

export default function CenteredTextAppBar() {
  const classes = useStyles();

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Centered Text
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

您可以参考此CodeSandbox示例。

关于javascript - 如何在Material-UI AppBar中将标题水平居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57822375/