CODEWITHSUNDEEP
cssreactjsmaterial-uijssmakestyles
DiWeera98
DiWeera98

Reputation: 65

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?

Upvotes: 4

Views: 8187

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81833

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

Upvotes: 7

Related Questions