Material-ui makeStyles with both before and after

Question

I'm working on a project which requires the following CSS code.

.hexagon, .hexagon::before, .hexagon::after {
  width: 67px;
  height: 116px;
  border-radius: 18%/5%;
}

Is there a way to implement the above style using Material-UI makeStyles without separate use of before and after selectors?

Answer 1

You can use the below code, '&' means the generated class name that will be passed to the component

const useStyles = makeStyles({
  root: {
    "&, &:before, &:after": {
      // your styles
    }
  }
});

<div className={classes.root}>