大家好，今天的篇章要介紹的是 Material-UI

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

Material-UI

Material UI 呈現 Google's Material Design 的 React Component 集，這邊就直接安裝下來展示一段使用方式

npm i @material-ui/core

+ src/components/day08/MaterialContainer/MaterialContainer.tsx

執行結果

使用起來就是這麼的輕鬆寫意，隨選隨用，就能擁有 Material Design 風格的按鈕，接下來在講幾個筆者覺得也蠻不錯的功能。

CssBaseline

Material UI 提供了一種 normalize.css 的 component 引用方式，也就是 CssBaseline，通常筆者都會將它使用在最根部的 component 上。

src/Root.tsx

畫面就會有 normalize.css 設定

createMuiTheme

一次修改所有 Material UI component 的 css 樣式

src/Root.tsx

利用 createMuiTheme 定義 theme，塞給 MuiThemeProvider，不用一定要設在 Root 也可以。

palette 就是所有使用 color="primary"、color="secondary" 的 component 都會變更顏色，typography 則是 component 內的所有文字。

呈現

以上為筆者常用的全局設定，後續還會陸續用到並介紹不同的 Material UI component。

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day08-material-ui

明天會介紹 JSS，一個 CSS in JS 的函式庫