How to add an arrow up to a MI Popover using the before property of CSS?

I have a Popover:

<Popover
    id={id}
    open={openMe}
    anchorEl={anchorEl}
    className={classes.popover}
    onClose={handleCloseMe}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
>
  <Typography className={`${classes.popover} ${classes.typography}`}>
    ... Some contents
  </Typography>
</Popover>

And we'd like to add a arrow up to the Popover.

I wrote a CSS class for that:

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid black;
}

How can we add the arrow to the Popover class of Material UI?