Justnote

這章節將介紹透過 Chrome Debug 的方式

在前一章節，我們介紹了透過 styled-components 將 CSS 限制在 Component 內的方式，無論你喜不喜歡這個方式，它成功解決了 global style 的問題，並擁有許多擁護者，但好消息是，如果你不喜歡這個方式，React 提供了另一個稱為 CSS Module 的方式來解決這個問題，如果是透過 create-react-app 建立專案，這個方式甚至已經內建在專案內了，接下來讓我們透過 CSS Module 來改寫相同的範例。

到目前為止，在我們建立 Component 時，都會再額外建立一個同名的 css 檔案作為 Comoponent Style，但在 React 中，.css 一旦被任意 Component 導入，它就會成為 global style，而非只有導入的 Component 可以使用 (Scoped)，這在小專案也許不會是什麼問題，但當專案逐漸擴大、參與協作的人逐漸增加，就難免會發生 class 命名上重複的問題，進一步導致彼此的 CSS 互相覆蓋，這章節將介紹一個 React Plugin - styled-components 來解決這個問題

在前一章節中，我們可以將變數代入 JSX style 中動態賦值，這堂課將進一步套討 Conditional Style 更好的應用方式

這堂課將加上圖表來統計每個月份的總開銷，並根據資料動態改變 CSS Style