如何使用styled-components为MUI MenuItem设置选中与悬停样式

我希望在MUI的MenuItem组件设置selected={true}时为其添加background-color样式，同时为该组件添加鼠标悬停样式，请问该如何实现？

我的组件代码如下：

import * as React from "react";
import Paper from "@mui/material/Paper";
import MenuList from "@mui/material/MenuList";
import Stack from "@mui/material/Stack";
import { MenuItem } from "./styles";

export default function MenuListComposition() {
  return (
    <Stack direction="row" spacing={2}>
      <Paper>
        <MenuList>
          <MenuItem selected={true}>Profile</MenuItem>
          <MenuItem>My account</MenuItem>
          <MenuItem>Logout</MenuItem>
        </MenuList>
      </Paper>
    </Stack>
  );
}

对应的styles.js代码：

import styled from "styled-components";

import { default as MuiMenuItem } from "@mui/material/MenuItem";

export const MenuItem = styled(MuiMenuItem)`
  .MuiMenuItem-root {
    color: blue;
    padding: 10px 0;
    & .Mui-selected {
      background-color: red;
    }
    &:hover {
      background-color: green;
    }
  }
`;

使用styled-components的解决方案 #

你之前的写法存在选择器嵌套错误：Mui-selected是直接作用在MenuItem根元素上的类，不需要用后代选择器。正确的实现方式如下：

import styled from "styled-components";
import { default as MuiMenuItem } from "@mui/material/MenuItem";

export const MenuItem = styled(MuiMenuItem)`
  color: blue;
  padding: 20px;

  // 选中状态样式
  &.Mui-selected {
    background-color: red;
  }

  // 鼠标悬停样式
  &:hover {
    background-color: green;
  }
`;

说明 #

• &.Mui-selected：通过类选择器直接匹配带有Mui-selected类的MenuItem根元素，正确应用选中状态的背景色
• &:hover：直接为MenuItem添加悬停状态的背景色样式，无需额外嵌套

内容的提问来源于stack exchange，提问作者Happy1234