MUI v5版本下Menu组件的PopoverClasses属性如何设置？

MUI v5 弃用makeStyles后，可通过以下三种常用方式实现原有需求：

方案1：使用官方推荐的styledAPI封装组件（复用性最高） #

直接封装自定义Menu组件，样式写在封装逻辑里，后续直接调用即可：

import { useState } from 'react';
import { styled } from '@mui/material/styles';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

// 定义自定义样式，可覆盖任意Popover相关类
const CustomMenu = styled(Menu)(({ theme }) => ({
  // 对应Popover的paper类，可替换为你需要修改的其他Popover类名
  '& .MuiPopover-paper': {
    borderRadius: 6,
    boxShadow: theme.shadows[2],
    padding: theme.spacing(1),
  }
}));

// 组件内使用
function Demo() {
  const [anchorEl, setAnchorEl] = useState(null);
  const handleClose = () => setAnchorEl(null);

  return (
    <CustomMenu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={handleClose}
    >
      <MenuItem onClick={handleClose}>选项1</MenuItem>
      <MenuItem onClick={handleClose}>选项2</MenuItem>
    </CustomMenu>
  );
}

方案2：用tss-react实现类makeStyles写法 #

如果习惯了v4的makeStyles调用方式，可使用MUI官方推荐的替代库tss-react，直接给PopoverClasses传类名：

1. 先安装依赖：
   npm install @tss-react/mui @emotion/react @emotion/styled
2. 代码实现：

import { useState } from 'react';
import { makeStyles } from 'tss-react/mui';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

const useStyles = makeStyles()((theme) => ({
  popoverPaper: {
    borderRadius: 6,
    boxShadow: theme.shadows[2],
  },
  popoverRoot: {
    // 对应Popover的root类样式
  }
}));

function Demo() {
  const { classes } = useStyles();
  const [anchorEl, setAnchorEl] = useState(null);
  const handleClose = () => setAnchorEl(null);

  return (
    <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={handleClose}
      PopoverClasses={{
        paper: classes.popoverPaper,
        root: classes.popoverRoot,
        // 其他需要覆盖的Popover类可在此处扩展
      }}
    >
      <MenuItem onClick={handleClose}>选项1</MenuItem>
      <MenuItem onClick={handleClose}>选项2</MenuItem>
    </Menu>
  );
}

方案3：单次使用可直接用sx属性 #

如果只是临时修改不需要复用，直接通过sx属性指定样式即可：

import { useState } from 'react';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

function Demo() {
  const [anchorEl, setAnchorEl] = useState(null);
  const handleClose = () => setAnchorEl(null);

  return (
    <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={handleClose}
      sx={{
        '& .MuiPopover-paper': {
          borderRadius: 6,
        }
      }}
    >
      <MenuItem onClick={handleClose}>选项1</MenuItem>
      <MenuItem onClick={handleClose}>选项2</MenuItem>
    </Menu>
  );
}

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