0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React CSSの適用方法をまとめる

Posted at

React初心者です。自分の理解のためにまとめてみます

コンポーネントの定義方法・CSSをモジュール化するか・SCSS記法が使えるかとかで分類できる

コンポーネントの定義方法による分類

定義したCSSをコンポーネントに適用する

styleやclassなどに装飾を定義して、コンポーネントに割り当てていく方法

  • inline styles
  • CSS Modules
  • Styled JSX
  • Emotion
コンポーネントごと定義する
  • Styled components
  • Emotion

CSSをモジュール化するかしないか

モジュール化する(2つにファイルを分ける)
  • CSS Modules
モジュール化しない(jsxファイルに記述する)
  • その他

記法による分類

SCSS記法が使える
  • CSS Modules
  • styled components
  • Emotion
SCSS記法が使えない
  • styled JSX
JavaScriptのオブジェクトとして書く
  • Inline styles
  • Emotion
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?