Как позиционировать элементы в панели материалов-пользовательского интерфейса

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;

Этот код создает панель приложений, которая выглядит следующим образом. Обратите внимание на тесные ссылки.

Как я могу стилизовать панель приложений так, чтобы ссылки располагались, как показано ниже? В документации Material-UI, похоже, нет ничего о позиционировании вещей в AppBar.