使用 MaterialUI Grid 指定 ::after 样式

Question

I read Flex-box: Align last row to grid and trying to see if this will work for me too:

.grid::after {
  content: "";
  flex: auto;
}

but not sure how to specify this in JS styles that I use in MaterialUI:

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 140,
  },
  control: {
    padding: theme.spacing(2),
  },
  fullName: {
    marginRight: '3px'
  }
}));

Like how do I add after to a MaterialUI Grid?

 <Grid className={classes.root} container justify="space-around" spacing={2}>
   <CompanyList companies={companies} data-test-id="companyList" />
 </Grid>

Answer 1

You could use like below:

const useStyles = makeStyles((theme) => ({
  grid: {
    // --- some styles
    '&::after': {
        // --- some style
    }

  },
}));

Answer 2

It's similar task as to add pseudo element to material-ui component

content attribute needed to be double quoted

Working exammple

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    "&::after": {
      content: '""',
      width: 40,
      height: 40,
      backgroundColor: "cyan",
      color: "white"
    }
  },
}));

export default function Material() {
  const classes = useStyles();

  return (
    <div>
      <h1>Material</h1>
      <Grid
        className={classes.root}
        container
        justify="space-around"
        spacing={2}
      >
        <CompanyList companies={companies} data-test-id="companyList" />
      </Grid>
    </div>
  );
}