'MUI ListItem with rounded corners and shadow
With MUIv5, trying to get menu items in a drawer to have more rounded corners along with a shadow. I'm sure I'm doing something wrong here, below is my attempt (and I also attempted setting borderRadius within & .MuiListItem-button)
menu: {
borderRadius: '0.5',
padding: theme.spacing(1),
},
menuItem: {
borderRadius: '0.5',
width: 220,
},
menuItemIcon: {
color: theme.palette.primary.dark,
},
...
<List className={classes.menu}>
<ListItem
name="menu"
button
className={classes.menuItem}
onClick={() => { handleClick('/home', 0); }}
selected={selected}
>
<ListItemIcon className={classes.menuItemIcon}>
<HomeIcon />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItem>
<ListItem
button
className={classes.menuItem}
onClick={() => { handleClick('/blog', 1); }}
selected={selected}
>
<ListItemIcon className={classes.menuItemIcon}>
<SubjectIcon />
</ListItemIcon>
<ListItemText primary="Blog" />
</ListItem>
</List>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
