Reactのコンポーネントにスタイル適用どうするの

色々なコード見てると色々な書き方があって初心者からするとカオス。
結論を言うと普通にCSS書いてclassNameでCSSクラスを指定する（classはJavaScriptの予約語のためPropsに使えない）のでOK。

CSS とスタイルの使用 – React

https://ja.reactjs.org/docs/faq-styling.html

色々な書き方

だが一応色々な書き方があると言うことは知っておいた方がよさげ。

Qiita

Reactのコンポーネントのスタイリングをどうやるか - Qiita

https://qiita.com/lightnet328/items/218eb1c4a347302cc340

• 普通にCSS書いてclassNameでクラスを指定
• インラインスタイル
• CSS Modules
• CSS-in-JS

CSS力が高いかJS力が高いかで好みや採用判断が分かれそう。

普通にCSS書いてclassNameでクラスを指定

• スタンダードなやり方

多くの場合、className を使って外部の CSS スタイルシートに定義された CSS クラスを参照するべきです。

ref: DOM要素 属性についての差異 style

インラインスタイル

• スタイリングに用いる値を動的に計算できるのがメリット
• パフォーマンス的に多用は良くない
• 疑似セレクタやメディアクエリを使うことができない
• プロパティ名がケバブケースではなくキャメルケースになる

CSS Modules

• 普通に書いたCSSファイルをコンポーネントのソースの中でimportしてJSのモジュールのごとく使用
• CSSのクラス名が衝突しないように計らってくれるので自分でCSS設計しなくても大丈夫

CSS-in-JS

• JavaScriptを用いてCSSを生成するパターンのことを指す
• サードパーティのライブラリによって提供される