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??

OBN · Accepted Answer · 2021-03-05 01:46:48Z

4

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%)"
}
})

answered Mar 5, 2021 at 1:46

OBN

3712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related