如何使用内联样式的前缀。应对

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规则自动以供应商为前缀，因此您无需考虑它。