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

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

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

change

-webkit-transition

to

webkitTransition

This applies to all vendor prefixes.