大家好，今天的篇章要介紹的是 JSS

會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day08-material-ui

JSS

JSS 是一個 CSS in JS 的函式庫，可以用 JavaScript 來定義 classNames 及 styles，筆者認為他有些許部分很像 Sass，像是 nested selectors 之類的寫法，不過 JS 倒是原本就有變數、函數這些功能可以用了。

Material UI 提供的 styles 定義方式就是基於 react-jss 的方式來擴充的，先示範一段定義一個閃亮亮 hover 的 button。

+ src/components/day09/ShineButton/ShineButton.tsx

參考 https://cssfx.dev/ 這裡的 css，改成用 jss 寫的方式

執行結果

實際執行處理完後的程式碼是這樣的

不管你的 .tsx 用了幾個，他的 className 都會在結尾按照編號 1 2 3 ...，一直照順序往下編，所以 class 名稱就能大大方方的取，不怕會有重複的問題（不過現在只要是基於 component 來設置 css 的方式或是有用 webpack 的 loader 來調整，應該都可以做得到這種功能）。

Default Theme

他還有提供一系列的 CSS 設置屬性可以直接利用，因為 typescript 型別檢查的關係，需要改寫一些些

src/components/day09/ShineButton/ShineButton.tsx

執行結果

這邊我們在 makeStyles 時，掛上一個帶有 theme 參數的回傳 function，theme 參數可 參考這，這邊筆者用了一些它提供的設置屬性，最特別的應該是

Material UI 提供了它預設使用的 breakpoint 斷點範圍，可以直接用上面程式碼的 theme.breakpoint.up 或 theme.breakpoint.down 來指定 CSS Media Queries，如果能靈活運用這些設置屬性，並且在特殊需求時善用 createMuiTheme 來 override，定能對管理 CSS 有大大的幫助。

不知道是不是 material-ui 版本升級的關係，之前還要用 https://material-ui.com/styles/api/#createstyles-styles-styles 這種方式來讓 typescript 理解回傳值，不過既然它編譯得過，那就這樣吧。

以上就是筆者常用到的 Material UI 的 JSS 使用方式，如果各位有在 React 中用過 css 或 sass 的經驗，就會需要對 webpack 引入一些 loader，還有 autoprefixer，JSS 因為就是 js 語法，已經省掉載入不同 loader 的步驟，還有 autoprefixer，Material UI 封裝的 JSS 也幫你做掉了，https://material-ui.com/styles/advanced/#jss-plugins ，可以看看連結裡面的連結 jss-plugin-vendor-prefixer。

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day09-jss

明天會介紹 React Router 來實作 SPA！