时间戳

首页 > 解决方案 > 我们如何在 js 的 css 中添加 -webkit-transform 属性？

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

问题描述

.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

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

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属性。

标签： cssreactjscss-in-js

解决方案

只需摆脱破折号并将您的属性附加到 camelCase 中。

改变

-webkit-transition

至

webkitTransition

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

推荐阅读