material-ui - 如何在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 中定位东西的内容。

标签： material-ui