Reactではスタイルシートをファイルのまま使うよりも、JavaScriptからスタイル要素に直接指定する方法が好まれます。ただ、その際に問題になるのは通常のスタイルシートと書き方が全く異なるということでしょう。 数年前まではデザイナーとエンジニアの作業分担が言われていたのですが、Reactではうまくいきません。そこで代替手段としてnative-cssを使ってみましょう。

native-cssの使い方

native-cssは以下のようにスタイルシートを指定して実行します。

$ native-css input.css output.js --react

元々のスタイルシートは次のようになっていたとします。

.taxi {
    background-color: #F8F8F8;
    color: #999;
}

#car {
    color: blue;
}

できあがったファイルは次のようになります。このstylesを使ってReactの処理を書いていきます。IDとクラスは区別されなくなるようです。

var styles = StyleSheet.create({
{
  "taxi": {
    "background-color": "#F8F8F8",
    "color": "#999"
  },
  "car": {
    "color": "blue"
  }
}
});

これであればデザイナーは普段通りの仕事をして、後はプログラマがnative-cssを使って変換すれば良くなります。なお、CLIではなく、プログラムの中で動的にファイルを読み込むことも可能です。後はメディアクエリーもサポートされています。

native-cssはReact用、JavaScript製のオープンソース・ソフトウェア（MIT License）です。

raphamorim/native-css: Convert pure CSS to React Style or javascript literal objects.