MUI

Components

Dashboard的なnavigationを作る際には、

Box以下に、

AppBar, Drawer,Boxという３つの領域を作る

styled()

componentを引数にとって、そのcomponentにstyle(css)を設定する。styledComponentが返る。それをcomponentとしてそのまま適用

変数や計算した結果でCSSを設定できるし、コンポーネント単位にできる

Typography

Typography というコンポーネントがあり、これを使うことでデザインシステムで定義された文字スタイルを当てることができます

<CssBaseline />

<Box/>

<Grid/>との違いは?

divに近いのは Box, GridはGrid Layoutを作る際の syntax sugar

<Paper/>

<Card/>との違いが分からないが,, API(props)が違う？かな。

Dashboard UIの構造を確認しておく

ThemeProvider

Box

CssBaseline

AppBar

Drawer

Box

Toolbar

Container

Grid

Grid > Paper

Grid > Paper

Grid > Paper

Copywright