👙
Reactでのスタイリング方法の比較
本記事はUdemyの「【2022年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript」を参考にまとめたものです。
外部CSSファイルの読み込み
グローバルスコープで読み込んでスタイリングする方法。サイト全体に適用したいときに使える。
インラインスタイル
style属性として各要素にインラインでスタイリングする方法。
- 一時的な検証用として使う
- 疑似要素、メディアクエリが使用できない
CSS Modules
CSSをモジュールとしてJSファイルに読み込んで、コンポーネントごとにローカルスコープを作ってスタイリングする方法。
- クラス名の衝突が起きない
- 将来、非推奨になる可能性がある
- CSSとJSが2つのファイルに分かれる
CSS in JS
2022年現在、もっともトレンディーなスタイリング方法。
CSSをJSファイル内に記載して、CSSを適用したコンポーネントを作成してスタイリングする方法。
基本的にはstyled-componentsやemotionなどのライブラリを使用する。
- クラス名の衝突が起きない
- CSSとJSが1つのファイルにまとまる
- propsを参照して動的にスタイリングできる
- 疑似要素やメディアクエリが使用できる
参考
Discussion