如何为内联样式使用前缀。反应

Question

例如。

        return {
        transform: 'rotateY(' + d.rotateY + 'rad) '
        + ' translateX(' + translateX + 'px)'
        + ' translateZ(' + d.translateZ + 'px)'
        + ' rotateY(' + d.rotateYAround + 'deg)',
        ...

如何使用'ms'前缀？

Answer 1

根据React docs：

ms 以外的供应商前缀应以大写字母开头。这就是为什么 WebkitTransition 有一个大写的“W”。

所以你的内联样式看起来像这样：

return {
  msTransform: 'rotateY(' + d.rotateY + 'rad) ' +
    ' translateX(' + translateX + 'px)' +
    ' translateZ(' + d.translateZ + 'px)' +
    ' rotateY(' + d.rotateYAround + 'deg)',
  ...,

  transform: 'rotateY(' + d.rotateY + 'rad) ' +
    ' translateX(' + translateX + 'px)' +
    ' translateZ(' + d.translateZ + 'px)' +
    ' rotateY(' + d.rotateYAround + 'deg)',
  ...
}

虽然我会推荐一些自动添加前缀的东西。您可能想考虑使用样式组件等库，而不是使用内联样式。

根据styled-components docs：

CSS 规则会自动添加供应商前缀，因此您无需考虑。