选择时 MUI 排版颜色更改

如何解决选择时 MUI 排版颜色更改

我正在尝试更改 MenuItem 中嵌入的 Typography 组件的样式。我无法在 ListItem 上添加样式，但无法这样做

这是我的代码的链接：https://codesandbox.io/s/dztbc?file=/demo.tsx:1481-1804

预期行为：选择时更改样式。 Access 的颜色应在选择时变为绿色且 fontWeight 更粗

当前行为：样式仅在选择时应用于“轻邮件”。我该如何解决？

解决方法

MenuItem 通过键名 selected 接受所选项目的样式规则，如 classes prop 中的样式规则。但是对于这个工作项目也应该收到一个布尔值 select 道具，无论该项目是否被选中。

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,{
      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>
  );
}

这是一个工作演示：