选择时 MUI 排版颜色变化

Question

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

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

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

当前行为：样式仅在选择时应用到 'light mail'。我该如何解决？

Answer 1

MenuItem 通过键名 selected 接受所选项目的样式规则，如类属性。但是为了这个工作项目还应该收到一个布尔值 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,
      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>
  );
}

这是一个工作演示：

选择时 MUI 排版颜色变化

MUI Typography color change on selection

css

typography

menuitem

reactjs

material-ui