[筆記] React Hooks 起來 – Ch4 – 前導

Posted onAuthorANDY LIEN

章節連結

因為實務上的需要來熟悉 React，就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這邊筆記下關於 CSS-in-js 的基礎知識。

react logo

內容

1. CSS-in-JS 可以確保「某個元件內所撰寫的樣式，縱使與其他的元件有相同名字，也不會互相干擾」
2. 使用 emotion 的 Styled Components 來完成任務，也可和 tailwind css 結合
3. Styled Component 編譯出來的 CSS class 名稱都會帶有特殊名稱，這樣一來就不會互相干擾

程式碼

https://github.com/andy922200/practice-20230615/commit/31fb1a6bcc2926126bdaafbe3feef12d02b837d0

系列文章

  • [筆記] React Hooks 起來 – Ch7 – 切換畫面元件
  • [筆記] React Hooks 起來 – Ch6 – 建立自己的 Hook
  • [筆記] React Hooks 起來 – Ch6 – useMemo 的使用
  • [筆記] React Hooks 起來 – Ch5 – useState 和 useEffect
  • [筆記] React Hooks 起來 – Ch5 – useCallback 和 TypeScript 注意事項
  • [筆記] React Hooks 起來 – Ch4 – 實作深色主題
  • [筆記] React Hooks 起來 – Ch4 – 增加狀態管理
  • [筆記] React Hooks 起來 – Ch4 – SVG
  • [筆記] React Hooks 起來 – Ch3
  • [筆記] React Hooks 起來 – Ch1 ~ Ch2
    • 按讚加入粉絲團

    延伸閱讀