JSX CSSをインラインスタイル

Question

私はReactで作業しています。私はCSSのオブジェクトリテラルを取り、それを文字列に変換する必要があります。 Reactはスタイルタグに追加されたスタイルオブジェクトに対してこれを自動的に行います。 Reactや他のライブラリにオブジェクトリテラルをCSS文字列に変換する関数がありますか？

{ 
    fontSize: '4em', 
    zIndex: 2, 
    marginLeft: '-.5em' 
} 

そして、それはCSSの文字列に変換します：

例えば、私は次のようになりますリテラルを取る必要があり

"font-size: 4em; z-index: 2, margin-left: -.5em" 

この仕事のために使用するのに最適なツールは何ですか？

Answer 1

私は、これはあなたが探しているものであると信じて： https://www.npmjs.com/package/apeman-react-style

あなたはリテラル文字列やスタイルオブジェクトデータとしてそれを返すかどうかを選択することができます。

希望に役立ちます！

Answer 2

ここでブラウザのデッドシンプルES5変換ルーチンです：

function o2s(o){ 
    var elm=new Option; 
    Object.keys(o).forEach(function(a){elm.style[a]=o[a];}); 
    return elm.getAttribute("style"); 
} 

// test/usage: 
o2s({ 
    fontSize: '4em', 
    zIndex: 2, 
    marginLeft: '-.5em' 
}); 

// == "font-size: 4em; z-index: 2; margin-left: -0.5em;" 

このアプローチはまた、CSSルールを自己検証し、任意の既知のベンダープレフィックスと非標準プロパティで動作します。