👙

Reactでのスタイリング方法の比較

2022/11/30に公開

本記事は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-componentsemotionなどのライブラリを使用する。

  • クラス名の衝突が起きない
  • CSSとJSが1つのファイルにまとまる
  • propsを参照して動的にスタイリングできる
  • 疑似要素やメディアクエリが使用できる

参考

https://www.udemy.com/course/react-complete-guide/

Discussion

ログインするとコメントできます