如何在material-ui appbar中定位项目

Question

目前我有这段代码：

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;

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

export default styles;

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

如何设置AppBar的样式，以便链接定位如下？ material-ui文档似乎没有任何关于在AppBar中定位事物的内容。