我们如何在js中的css中添加-webkit-transform属性？

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/xyaraj/pen/amzydG

我在 React 应用程序中使用 JS 中的 CSS，我想知道如何将-webkit-transitioncss 等属性放入 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',
    },
}

上面的代码是我在JS中使用CSS，我想知道如何添加下划线类并添加属性-webkit-transform。

Answer 1

只需去掉破折号并将您的属性附加到驼峰式命名法中即可。

改变

-webkit-transition

到

webkitTransition

这适用于所有供应商前缀。