Как мне оформить Popover меню Material-UI с помощью JSS?

Question

У меня здесь есть песочница с кодом: https://codesandbox.io/s/0qv1jwlmlv

То, что я делаю, довольно просто:

class SimpleMenu extends React.Component {
  state = {
    anchorEl: null
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { anchorEl } = this.state;
    const { classes } = this.props;
    return (
      <AppBar className={classes.root}>
        <Toolbar>
          <Button
            variant="contained"
            color="secondary"
            aria-owns={anchorEl ? "simple-menu" : null}
            aria-haspopup="true"
            onClick={this.handleClick}
          >
            Open Menu
          </Button>
          <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={this.handleClose}
            PopoverClasses={{
              paper: classes.menu
            }}
          >
            <MenuItem onClick={this.handleClose}>Profile</MenuItem>
            <MenuItem onClick={this.handleClose}>My account</MenuItem>
            <MenuItem onClick={this.handleClose}>Logout</MenuItem>
          </Menu>
        </Toolbar>
      </AppBar>
    );
  }
}

const styles = {
  root: {
    height: 100
  },
  menu: {
    position: "relative",
    top: 100
  }
};
export default withStyles(styles)(SimpleMenu);

Здесь моя панель навигации имеет фиксированную высоту, и когдаВы нажимаете кнопку меню, я хочу, чтобы кнопка меню открывалась ниже панели навигации.

Для этого - я добавил относительный стиль в всплывающее меню, и этот стиль применяется к бумаге для всплывающих окон - но встроенный стиль, который материал применяет к всплывающему окну, вступает во владение, и он не работает.

Как мне это стилизовать?