因為工作的關係，在專案上接觸到Material UI的Framework，也讓我理解到為什麼這套UI庫可以這麼受歡迎，雖然一開始接觸的時候門檻還挺高的，但克服之後真的會覺得比較方便控管畫面元件的CSS。

究竟什麼是Material Design呢？

“設計是創造的藝術，我們的目標就是要滿足不同的人類需要。人們的需要會隨著時間發展，我們的設計，實踐，以及理念也要隨之提升。我們在自我挑戰，為用戶創造了一個可視化語言，它整合了優秀設計的經典原則和科學與技術的創新。這就是Material Design。” —— 關於Material Design。

好了，商業話術就吹到這，差不多該介紹本體了~

Material UI 的官方網站其實都有很詳細的介紹了，我這邊會帶大家大致看過每個component的DEMO還有流程，那麼就先開始吧!!
安裝的部分請在各位的專案下

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

字體檔案可以透過Google Fonts引入:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

icon的話我個人是用react-icons的來替代，當然也是可以用他們家的icon

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

此外我們還會用到它最好用的styles套件，當然你也可以只使用它這個套件來取代styled-components:

// with npm
npm install @material-ui/styles

// with yarn
yarn add @material-ui/styles

這裡引入的時候要注意，從＠material-ui/styles引入的style是不包含defaultTheme的！
如果需要defaultTheme的話要從＠material-ui/core/styles引入。
稍微簡單的演示一下用法

import { makeStyles, Typography } from "@material-ui/core";
// css需轉成小駝峰命名改寫,以物件的形式打包,並於className中指向所需的class
const useStyles = makeStyles({
    title: {
        fontWeight: 'bold',
        letterSpacing: 5,
    }
})

export default function App () {
    const classes = useStyles();
    return (
        <div>
            <Typography className={classes.title}>
                Hollow Material UI
            </Typography>
        </div>
    )
}

今天第一天的內容先到這,明天會接續講解各個component的demo及應用。