text: import React from 'react';
  import PropTypes from 'prop-types';
  import { MenuList, MenuItem } from 'material-ui/Menu';
  import Paper from 'material-ui/Paper';
  import { withStyles } from 'material-ui/styles';
  import { ListItemIcon, ListItemText } from 'material-ui/List';
  import InboxIcon from 'material-ui-icons/MoveToInbox';
  import DraftsIcon from 'material-ui-icons/Drafts';
  import SendIcon from 'material-ui-icons/Send';
  
  const styles = theme => ({
    menuItem: {
      '&:focus': {
        backgroundColor: theme.palette.primary[500],
        '& $text, & $icon': {
          color: theme.palette.common.white,
        },
      },
    },
    text: {},
    icon: {},
  });
  
  function ListItemComposition(props) {
    const { classes } = props;
  
    return (
      <Paper>
        <MenuList>
          <MenuItem className={classes.menuItem}>
            <ListItemIcon className={classes.icon}>
              <SendIcon />
            </ListItemIcon>
            <ListItemText classes={{ text: classes.text }} inset primary="Sent mail" />
          </MenuItem>
          <MenuItem className={classes.menuItem}>
            <ListItemIcon className={classes.icon}>
              <DraftsIcon />
            </ListItemIcon>
            <ListItemText classes={{ text: classes.text }} inset primary="Drafts" />
          </MenuItem>
          <MenuItem className={classes.menuItem}>
            <ListItemIcon className={classes.icon}>
              <InboxIcon />
            </ListItemIcon>
            <ListItemText classes={{ text: classes.text }} inset primary="Inbox" />
          </MenuItem>
        </MenuList>
      </Paper>
    );
  }
  
  ListItemComposition.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(ListItemComposition);
  