インラインスタイルに接頭辞を使用する方法。 React

Question

たとえば、

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

「ms」プレフィックスの使用方法は？ React docsパー

Answer 1

：

ベンダーは、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ルールは自動的に接頭辞ベンダーされているので、あなたはそれについて考える必要はありません。