<aside> 💡

チャプター完了時点のソースコード

https://github.com/craftgear/react-hands-on/tree/ch3

</aside>

CSS適用方法4つ

• グローバルCSS
  • 通常のスタイルシートと同じ
• CSS Module
  • コンポーネントごとにCSSクラスをスコープ化できる
• インラインStyle
  • コンポーネントに style 属性を追加する
• CSS-in-JS
  • jsx内でcssをかけるようにする仕組み
  • emotion
    • https://emotion.sh/docs/introduction
  • emotionベースのコンポーネントライブラリ
    • ChakraUI / MUI / Antd / Mantine

React@18以降の状況

• CSS-in-JSはReact18以降で描画が遅くなる
  • https://github.com/reactwg/react-18/discussions/110
  • https://old.reddit.com/r/reactjs/comments/14ykhm2/is_chakraui_still_in_use_today_or_are_there/jrsvdt0/
• zero runtime CSS-in-JS
  • vanilla-extract https://vanilla-extract.style/
  • linaria https://linaria.dev/
  • panda css https://panda-css.com/
• Tailwind CSS ベースのコンポーネントライブラリ
  • shadcn/ui https://ui.shadcn.com/
  • Flowbite React https://flowbite-react.com/
  • ParkUI https://park-ui.com/
  • DaisyUI https://daisyui.com/

DaisyUI

1. Tailwind CSSのインストール

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

2. tailwind.config.js の content プロパティを更新

   /** @type {import('tailwindcss').Config} */
   export default {
     **content: ['./index.html', './src/**/*.{jsx,tsx,js,html}'],**
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

3. index.css をTailwind CSSのクラスで置き換え

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

4. DaisyUIのインストール

   npm i -D daisyui@latest