Material UI in React [DAY 1] 简介

因为工作的关系，在专案上接触到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及应用。