CODEWITHSUNDEEP
cssreactjsmaterial-uimenuitemtypography
S Mahajan
S Mahajan

Reputation: 113

MUI Typography color change on selection

I'm trying to change styling of Typography component embedded inside MenuItem. I'm unable to add styling on ListItem but unable to do so

Here is the link to my code: https://codesandbox.io/s/dztbc?file=/demo.tsx:1481-1804

Expected behavior: Change styling when selected. Color of Access should turn green and fontWeight bolder on selection

Current behavior: Styling only getting applied to 'light mail' when selected. How can I resolve it?

Upvotes: 1

Views: 1612

Answers (1)

Rajiv
Rajiv

Reputation: 3772

MenuItem accepts a style rule for the selected item as in classes prop by the key name selected. But for this to work item should also receive a boolean select prop, whether the item is selected or not.

const StyledMenuItem = withStyles((theme) => ({
  root: {
    "&:focus": {
      backgroundColor: theme.palette.primary.main,
    },
  },
  selected: {
    color: "red",
  }
}))(MenuItem);

export default function CustomizedMenus() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [selected, setSelected] = React.useState(null);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleMenuItemClick = (e, index) => {
    setSelected(index);
  };
  const menuArr = [
    {
      Icon: SendIcon,
      text: "Sent mail"
    },
    {
      Icon: DraftsIcon,
      text: "Sent mail"
    },
    {
      Icon: InboxIcon,
      text: "Inbox"
    }
  ];

  return (
    <div>
      <Button
        aria-controls="customized-menu"
        aria-haspopup="true"
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <StyledMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {menuArr.map((item, index) => (
          <StyledMenuItem
            selected={index === selected}
            onClick={(event) => handleMenuItemClick(event, index)}
          >
            <ListItemIcon>
              <item.Icon fontSize="small" />
            </ListItemIcon>
            <ListItemText primary={item.text} />
          </StyledMenuItem>
        ))}
      </StyledMenu>
    </div>
  );
}

Here is a working demo:
Edit Material demo (forked)

Upvotes: 1

Related Questions