Material ui 如何在物料ui appbar中定位项目

目前我有以下代码：

import React from 'react';
import { AppBar, Toolbar, Typography } from 'material-ui';
import { Link } from 'react-router-dom';

const style = {
  flexGrow: 1,
};

const NavBar = ({ classes }) => (
  <div style={style}>
    <AppBar position="static" elevation={0} className={classes.appBar}>
      <Toolbar>
        <Link exact to="/">
          <Typography variant="title" className={classes.navLink}>
            Title
          </Typography>
        </Link>
        <Link exact to="/about" className={classes.navLink}>
          <Typography variant="title">
            about
          </Typography>
        </Link>
      </Toolbar>
    </AppBar>
  </div>
);

export default NavBar;

该代码创建了一个AppBar，如下所示。注意那些狭窄的链接

如何设置AppBar的样式，使链接的位置如下图所示？material ui文档似乎没有任何关于在AppBar中定位内容的内容

---

您是否尝试过仅使用工具栏并使用flexbox定位标题和链接？AppBar是一个非常有限的应用程序，它的自定义功能非常有限children@AlexSanchez我试试看，效果更好。谢谢@Alexansanchez

const styles = () => ({
  appBar: {
    background: 'transparent',
    color: 'black',
    boxShadow: 'none',
  },
  navLink: {
    textDecoration: 'none',
  },
});

export default styles;