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

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

我在 JS 中为我的 React 应用程序使用 CSS，我想知道我们如何在 js 中的 css 中放置 -webkit-transition 等属性。

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，我想知道如何添加下划线class和添加-webkit-transform 属性.

Answer 1

只需去掉破折号并将属性添加到驼峰式。

改变

-webkit-transition

至

webkitTransition

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

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

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

css

reactjs

css-in-js