🌊

MUI 基本

2022/05/14に公開約1,300字

導入方法

% 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'

https://mui.com/material-ui/getting-started/installation/#npm

https://mui.com/material-ui/icons/#material-svg-icons

メモ

maxWidth="md”は Containerのsx={{}}に入れない 外で指定する

<Container maxWidth="md" sx={{backgroundColor: '#FCE5CE',display:'flex' }}>
color	
'inherit'
| 'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string


上にスクロールするとAppBarが隠れ、
下にスクロールするとAppBarが出てくる動き

以下の記事を参考に作成

https://mui.com/material-ui/react-app-bar/#hide-app-bar
https://lightbulbcat.hatenablog.com/entry/2019/08/20/041216

レスポンシブ 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

ログインするとコメントできます