text: import React from 'react'
  import PropTypes from 'prop-types'
  import { withStyles } from '@material-ui/styles'
  import Typography from '@mui/material/Typography'
  import Button from '@mui/material/Button'
  import Popover from '@mui/material/Popover'
  import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'
  
  const styles = (theme) => ({
    typography: {
      margin: theme.spacing(2),
    },
  })
  
  const TriggerPopover = ({ classes }) => (
    <PopupState variant="popover" popupId="demoPopover">
      {(popupState) => (
        <div>
          <Button variant="contained" {...bindTrigger(popupState)}>
            Open Popover
          </Button>
          <Popover
            {...bindPopover(popupState)}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'center',
            }}
            transformOrigin={{
              vertical: 'top',
              horizontal: 'center',
            }}
          >
            <Typography className={classes.typography}>
              The content of the Popover.
            </Typography>
          </Popover>
        </div>
      )}
    </PopupState>
  )
  
  TriggerPopover.propTypes = {
    classes: PropTypes.object.isRequired,
  }
  
  export default withStyles(styles)(TriggerPopover)
  