- React Material:UI Cookbook
- Adam Boduch
- 94字
- 2021-06-24 15:49:24
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:
![](https://epubservercos.yuewen.com/E00FB0/19470380001496806/epubprivate/OEBPS/Images/e36dd2f7-d322-4dc7-9e16-1f85e4ee534a.png?sign=1739361596-WiNTW8mocwOZ0GPnLjP2XXJwO32NY7uP-0-503446a4570c678a7f5891781c7a1c74)
Here is what the menu looks like with the custom menu options:
![](https://epubservercos.yuewen.com/E00FB0/19470380001496806/epubprivate/OEBPS/Images/3810a4f8-b578-4827-9db6-ec8c9ab86ff6.png?sign=1739361596-HLtj1kZf1BCEkOYAAud7QVJSKeB0bq30-0-a4425d6ab97b4cfa53bb2c2642684031)
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.