上QQ阅读APP看书，第一时间看更新

There's more...

Let's try setting some custom menu items and right-side buttons, using the MenuItems and RightButton properties respectively:

const ToolbarAbstraction = withStyles(styles)(
  ({ classes, ...props }) => (
    <div className={classes.root}>
      <MyToolbar
        MenuItems={({ closeMenu }) => (
          <Fragment>
            <MenuItem onClick={closeMenu}>Page 1</MenuItem>
            <MenuItem onClick={closeMenu}>Page 2</MenuItem>
            <MenuItem onClick={closeMenu}>Page 3</MenuItem>
          </Fragment>
        )}
        RightButton={() => (
          <Button color="secondary" variant="contained">
            Logout
          </Button>
        )}
        {...props}
      />
    </div>
  )
);

Here is what the toolbar looks like when rendered:

Here is what the menu looks like with the custom menu options:

The values that you're passing to MenuItems and RightButton are functions that return React elements. These functions are actually functional components that you're creating on the fly.