Material UI AppBar内Typography组件对齐问题求助

我懂你现在的烦恼——想让AppBar里的菜单按钮靠左，标题文本居中，但试了好几种方法都没搞定。其实问题出在Material-UI的Toolbar默认是flex布局，元素默认从左到右排列，你的标题文本会紧跟着菜单按钮，自然没法居中。

核心解决方案：借助Flex布局的flexGrow属性 #

只需要给标题文本的样式添加两个关键属性：flexGrow: 1和textAlign: 'center'。原理很简单：

• flexGrow: 1会让标题元素占据Toolbar中除菜单按钮外的所有剩余空间
• textAlign: 'center'让文本在这个剩余空间里自动居中

修改后的完整代码示例 #

首先调整样式定义：

const useStyles = makeStyles(theme => ({
  root: { flexGrow: 1, },
  menuButton: { marginRight: theme.spacing(2), },
  link: { margin: theme.spacing(1), color:"inherit", variant:"h8" },
  text:{ 
    flexGrow: 1,
    textAlign: 'center',
  },
}));

另外注意你的代码缺少Material-UI组件的导入，建议补充完整避免运行报错：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Typography from '@material-ui/core/Typography';

保持原有Toolbar的结构不变，现在菜单按钮会稳定左对齐，标题文本也能完美居中了。这个方法比你尝试的网格、内边距方案更简洁，完全利用flex布局的原生特性，效果更稳定。

内容的提问来源于stack exchange，提问作者Pedro Esnaola