React componentのスタイリングに何を使ったら良いかわからない

Question

Reactでフロントエンドを開発しておりますが、React componentのスタイリング方法が多数あり、どれが適切なのかがわかりません。

現在は、その場その場でテキトーにスタイリングをしてしまっています。Inline styleで記述している箇所もあれば、classNameを定義して外部のCSSファイルからスタイルを適用したり、Material UIのサイトにあるようなwithStylesを使ったりしています。

個人開発のサイトで行なっていることなので、特にこれといった不便はないのですが、スタイリングの書き方が統一されていない気持ち悪さがあります。また個人開発とはいえ、技術力向上も兼ねているので業界標準のような書き方があれば、それに従いたいと思っています。自分で調べた感じだとスタイリングのツール群の中では、styled componentが一つ頭抜けているのかなと感じたのですが、どうにもソースが最新のものとはいえないところもありました。

フロントエンド技術の栄枯盛衰が激しく、まだ業界標準が定まってはいない状態かとは思いますが、React componentのスタイリングはこれがおすすめ、こういったスタイリングを実際に業務でやっている、今はこの技術がきている等をご存知でしたらご教授いただけないでしょうか。よろしくお願いいたします。

Answer 1

会社で使っているReactのスタイリングの遷移です。

• 純粋なCSS
• aphrodite
• styled-component

と、結局styled-componentが一番筋が良いです。
ただし、最近はemotionのほうが勢いがましているみたいですよ。軽量やらいくつか理由があるらしいです。

https://emotion.sh/

まぁ今はstyled-componentで何ら不便はないです。

styled-componentsのフォルダ構造としては、とりあえずこちらを参考にしたら割ときれいに作れています
codesandbox@github

Comments

[kazuki__]

なるほど、やはり実務でもstyled-componentは使われているのですね。emotionというのは初めて聞きました。調べてみようと思います。それにしてもフロントエンド界隈の技術の移り変わりの早さがすごいですね。少し勉強しないとすぐに置いていかれてしまいそうです。
回答ありがとうございました！styled-component使ってReactのスタイリングしてみようと思います。