将Popovers的此Material UI挂钩api转换为Popovers的样式组件API

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Popover from '@material-ui/core/Popover';

const useStyles = makeStyles((theme) => ({
  popover: {
    // 样式规则
  },
  paper: {
    // 样式规则
  },
}));

const CustomPopover = () => {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

  const open = Boolean(anchorEl);
  const id = open ? 'custom-popover' : undefined;

  return (
    <div>
      <button onClick={handleClick}>Open Popover</button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        classes={{
          root: classes.popover,
          paper: classes.paper,
        }}
      >
        {/* Popover内容 */}
      </Popover>
    </div>
  );
};