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

1
  • 2
    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? Jun 8, 2020 at 0:37

1 Answer 1

5

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

change

-webkit-transition

to

webkitTransition

This applies to all vendor prefixes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.