How do we add -webkit-transform property in css in js?

Question

.underline {
  background-color: dodgerblue;
  display: inline-block;
  height: 2px;
  left: 50px;
  margin-top: -4px;
  position: absolute;
  top: 185px;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  width: 202px;
}

https://codepen.io/xayaraj/pen/amzydG

I am using CSS in JS for my React application and I was wondering how we can put properties such as -webkit-transition in our css in js.

const useStyles = makeStyles(() => ({
    icon: {
        padding: '.2rem .2rem',
        fontSize: '12px'
    },
    li: {
        display: 'block',
        font: 'bold 6px/12px sans-serif',
        padding: '5px 15px',
        textAlign: 'center',
        textDecoration: 'none',
        float: 'left',
    },
}

The code above is me using CSS in JS, I am wondering how I can add the underline class and add the -webkit-transform property.

transform has been supported without prefixes for the last 8 years (almost 10 years support in Chrome browser). Are you sure you need to include it? — Andy Hoffman
– Andy Hoffman, Commented Jun 8, 2020 at 0:37

chrispump · Accepted Answer · 2020-06-08 01:28:24Z

5

Just get rid of the dashes and append your property in camelCase.

change

-webkit-transition

to

webkitTransition

This applies to all vendor prefixes.

answered Jun 8, 2020 at 1:28

chrispump

661 silver badge2 bronze badges

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

Collectives™ on Stack Overflow

How do we add -webkit-transform property in css in js?

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