React と CSS

CSS の書き方が複数ある

Inline Styles
CSS Modules
Styled JSX
styled components
Emotion
Tailwind CSS

Inline Style

style={css オブジェクト} の方法
キャメルケースにしないといけない
イメージは html に直接 CSS 書いてる感じで非推奨なイメージ

CSS Modules

.css, .scss ファイルに定義していく
それなりに人気
コンポーネントごとに css を用意することが多い
.module.css と拡張子を2重にしないといけない
npm install node-sass

Styled JSX

積極採用している感じは無いが Next.js の標準ライブラリ
関数コンポーネントの中に <style></style> を書く
html の head にまとめて CSS 書くイメージ
<style jsx>{`ここにCSS`}</style>
SCSS 記法は使えない
Style JSX はプレーンな React ではわざわざ入れて使うことはぜず Next.js でとりあえず CSS-in-JS を使うぐらいしか使わない
npm install styled-jsx

styled components

スタイルをあてたコンポーネントを定義する CSS-in-JS
それなりに人気
SCSS 記法が使える
コンポーネントと同様に大文字から始まる style のあたったコンポーネントを使う
npm install styled-components

Emotion

それなりに人気
様々な使い方ができる
書式

/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";

npm install @emotion/react @emotion/styled

Style JSX のようにコンポーネントファイルの中に CSS を書く
ただし Emotion が用意した CSS を使う
SCSS が使える
Inline Styles のようにオブジェクトでスタイルを定義する
styled components のようにスタイルを当てたコンポーネントを使う @emotion/styled を使う

Tailwind CSS

最近人気
React だけでなく通常の html や css にも適用できる

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compatpostcss@^7 autoprefixer@^9
Create React App のとき Tailwind の動作に必要な PostCSS を上書きすることができないから CRACO(Create React App Configuration Override) を使う
npm install @craco/craco
package.json を編集し CRACO で起動するようにする
色々設定を変更する必要があるため git の差分で確認して...

"script":{
  "start": "react-scripts start" じゃなくて
  "start": "craco start" にする
}

Tailwind 公式 React でのインストール方法
書籍のインストールコマンドではエラーになったから公式を読んでインストール方法を変えた
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
postcss.config.js, tailwind.config.js が作成され tailwind.config.js を編集

module.exports = {
  purge: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

その他

Storybook とはコンポーネントカタログのこと
0からコンポーネントを作るよりもコンポーネントライブラリを使うことが多い

Tailwind 製の Headless UI
Chakra UI
Material-UI
Semantic UI React

など色々ある

FilesExpand file tree

chapter_05.md

Latest commit

History