material-ui的Popper组件中箭头的使用示例

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

const useStyles = makeStyles((theme) => ({
  arrow: {
    position: 'absolute',
    fontSize: 7,
    width: '3em',
    height: '3em',
    '&::before': {
      content: '""',
      margin: 'auto',
      display: 'block',
      width: 0,
      height: 0,
      borderStyle: 'solid',
      borderWidth: '1em 1em 0 1em',
      borderColor: `transparent transparent ${theme.palette.grey[700]} transparent`,
    },
  },
}));

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

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'arrow-popper' : undefined;

  return (
    <div>
      <button onClick={handleClick}>Toggle Popper</button>
      <Popper id={id} open={open} anchorEl={anchorEl}>
        <div className={classes.arrow} />
        <div>Popper Content</div>
      </Popper>
    </div>
  );
}

export default Example;