web-dev-qa-db-ja.com

reactjsのインラインスタイルにベンダープレフィックスを適用するにはどうすればよいですか？

ReactのCSSプロパティは、ベンダープレフィックスと共に自動的に追加されません。

たとえば、次の場合：

<div style={{
    transform: 'rotate(90deg)'
}}>Hello World</div>

Safariでは、回転は適用されません。

どうすれば達成できますか？

css3reactjsvendor-prefix
46
zealoushacker

Reactはベンダープレフィックスを自動的に適用しません。

ベンダープレフィックスを追加するには、次のパターンに従ってベンダープレフィックスに名前を付け、別の小道具として追加します。

-vendor-specific-prop: 'value'

になる：

VendorSpecificProp: 'value'

したがって、質問の例では、次のようにする必要があります。

<div style={{
    transform: 'rotate(90deg)',
    WebkitTransform: 'rotate(90deg)'
}}>Hello World</div>

この方法では、値のプレフィックスを付けることはできません。たとえば、このCSS：

background: black;
background: -webkit-linear-gradient(90deg, black, #111);
background: linear-gradient(90deg, black, #111);

オブジェクトは重複キーを持つことができないため、ブラウザがサポートしているのはどれかを知ることによってのみ可能です。

別の方法は、スタイリングツールチェーンに Radium を使用することです。その機能の1つは、自動ベンダープレフィックスです。

ラジウムの背景の例は次のようになります。

var styles = {
  thing: {
    background: [
      'linear-gradient(90deg, black, #111)',

      // fallback
      'black',
    ]
  }
};
72
zealoushacker

次のようなものを使用できます。

https://github.com/cgarvis/react-vendor-prefix

スタイルオブジェクトのベンダープレフィックスを自動的に設定します。

1
fabio.sussetto

私は実際に同じ問題に直面しました、そして、そこに反応する接頭辞ライブラリのどれも私が望んだ仕事をしませんでした。だから私は自分で1つ作りました：

react-prefixer

まだかなり若い（今朝作成）が、私はそれを維持します。うまくいけばそれが役立つ。

0
tquetano-r7

React.jsの経験はありませんが、Lea Verouのこのjsライブラリを見てください。 DOMで直接スタイルのプレフィックスを付けます。

http://leaverou.github.io/prefixfree/

0
Samuell