🌊
MUI 基本
導入方法
% npm install @mui/material @emotion/react @emotion/styled
% npm install @mui/icons-material
（それぞれコミットする）
cmd: 'npm install @mui/material @emotion/react @emotion/styled'
cmd: 'npm install @mui/icons-material'
メモ
maxWidth="md”は Containerのsx={{}}に入れない 外で指定する
<Container maxWidth="md" sx={{backgroundColor: '#FCE5CE',display:'flex' }}>
color
'inherit'
| 'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string
上にスクロールするとAppBarが隠れ、
下にスクロールするとAppBarが出てくる動き
以下の記事を参考に作成
レスポンシブ md(900px)から表示
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex'} }}>
---
</Box>
ハンバーガーメニューをmd以下で表示
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
<IconButton
onClick={toggleDrawer(anchor, true)}
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
color="inherit"
>
<MenuIcon />
</IconButton>
</Box>
Discussion