在Material UI BottomNavigationAction上添加伪元素

import React from 'react';
import { BottomNavigationAction, makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  root: {
    position: 'relative',
  },
  pseudoElement: {
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background: 'red',
    opacity: 0.5,
  },
});

const CustomBottomNavigationAction = () => {
  const classes = useStyles();

  return (
    <BottomNavigationAction
      className={classes.root}
      label="Home"
      icon={<HomeIcon />}
    >
      <span className={classes.pseudoElement}></span>
    </BottomNavigationAction>
  );
};

export default CustomBottomNavigationAction;