material-uiで使用したコンポーネント

何の記事？

Reactアプリ開発で使用したことのあるmaterial-uiコンポーネントの備忘録。

ブレークポイント

画面幅に応じてブレークポイントがある。Gridなどで利用される。

value         |0px     600px    960px    1280px   1920px
key           |xs      sm       md       lg       xl
screen width  |--------|--------|--------|--------|-------->
range         |   xs   |   sm   |   md   |   lg   |   xl

xsだけを指定すると全ての画面サイズでそれが適用される。
xsとsmを指定すると、600px以上のときにsmが適用されるようになる。

Grid

Gridレイアウトを作成出来る。
https://material-ui.com/components/grid/

• containerかitemかを指定することが出来る。
• spacing:１当たり8pxのスペースをあける。
• xs, smなどの属性で使用するGridのマス目を指定する。画面いっぱいは12マス。

GridList

繰り返しのパターンで項目を表示する。
https://material-ui.com/api/grid-list/

Typography

HTML要素とCSSを結びつけて簡単に文字列のデザインを作ることができる。
https://material-ui.com/api/typography/
https://material-ui.com/components/typography/

variant属性で使用するテーマを決めて、component属性で実際のhtmlタグを決めることが出来る。

TextField

ユーザー入力のインプット要素を作成する。
https://material-ui.com/components/text-fields/

Toolbar

メニューバーを作成することが出来る。
デフォルトでdisplay: flex;やposition: relativeがかかっている。
https://material-ui.com/api/toolbar/

IconButton

丸いbuttonタグを作成する。focusした際にbackgroundが変化するアニメーションもついている。
https://material-ui.com/api/icon-button/#iconbutton-api

Dialog

モーダルウィンドウを作成する。
https://material-ui.com/components/dialogs/#dialog

escキーを押したり周囲をクリックするとonCloseで設定した関数が呼ばれる。

DialogContent

ダイアログのコンテンツをラップするときに使う。
良い感じのpaddingやflexがかかっている。
https://material-ui.com/api/dialog-content/#dialogcontent-api

DialogActions

ダイアログ内のアクション（OKボタンやCancelボタンなど）を作成するときに使用。
justify-content: flex-endがかかっており、要素が右端に配置される。
https://material-ui.com/api/dialog-actions/#dialogactions-api

Snacbar

スナックバーを作成
https://material-ui.com/components/snackbars/

Tooltip

ホバーしたときやクリックしたときに文章を表示させることが出来る。
https://material-ui.com/components/tooltips/

withStyles

Material-UIのコンポーネントにスタイルを適用することが出来る。
コンポーネントではない。