Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 348
DiWeera98 Avatar asked Sep 05 '25 04:09

DiWeera98


1 Answers

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

like image 135
NearHuscarl Avatar answered Sep 07 '25 19:09

NearHuscarl