How to re-write -webkit-*** for CSS in JS React

Question

I have these css

transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

Now I want to move this to CSS in JS ReactJS style

const useStyles = makeStyles({
  transform: "translate(-50%, -50%)",
  -webkit-transform: "translate(-50%, -50%)",
  -ms-transform: "translate(-50%, -50%)"

However it can not be compiled

/src/views/LandingPage.js
  Line 85:5:  Parsing error: Unexpected token

  84 |     transform: "translate(-50%, -50%)",
> 85 |     -webkit-transform: "translate(-50%, -50%)",
     |     ^
  86 |     -ms-transform: "translate(-50%, -50%)"

How can I fix this??

Answer 1

The Material UI makeStyles() accepts a normal JS object, so you can define the key using a string:

const useStyles = makeStyles({
myStyle:{
  "transform": "translate(-50%, -50%)",
  "-webkit-transform": "translate(-50%, -50%)",
  "-ms-transform": "translate(-50%, -50%)"
}
})