cssreactjsmaterial-uijssmakestyles

Material-ui makeStyles with both before and after

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?

Solution

  • 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}>

    Codesandbox Demo