X を使うか inline style を使うかではなく併用できるし、むしろするべき
X には CSS (SCSS, CSS Modules) とか、CSS in JS とか任意のスタイリング方法が入りうる
なんか初心者に気づかれてない気がしたので
２つの選択肢A,Bをメリット・デメリットとともに提示されると、「A と B のどちらを取るか」と捉えられかねない（し、そう捉えているような記事もたまに見られる）
「inline style は CSS と JS をつなぐための架け橋」と考えられそう
外部に置く生 CSS ファイル(or SCSS / CSS Module)ではクラスを動的に生成できない
Zero Runtime CSS in JS でも原則不可能
or 独自の「動的」機能を備えている場合もある
内部で inline style を使っていそう
CSS in JS においても、クラスを動的に生成するのは負荷が高いらしい
emotion はむしろ inline styles の使用をベストプラクティスとして推奨している
生成が頻繁になる (e.g. x座標をtransformで動かしまくる) とさらに酷いのは想像に難くない
JS から注入する必要のある値がある
Props 由来の動的な値
コンポーネントが size={24} のようなプロパティを受け取って、そのサイズに反映する場合
CSS で実装できないスタイル
例: oklch 色空間を使った相対色構文 oklch(from white 0.2 c h / 0.4) は、2024/02/08現在、一部ブラウザで未サポート
{ "--background-soft": ${softenColor(backgroundColor)} }
backgroundColor は props として受け取った値
softenColor 関数の中で culori を使って alpha だけを 0.8 に編集した色を返す
おそらく「background の色の明度に応じて、文字の色はコントラストが確保できるように黒/白のどちらかにする」みたいなのを実装するためにも不可欠 (CSS で条件分岐はまだ不可能なはずなので)