//tips
//smart contract
Layout componentをどこに挿入するかの問題が出てきた。next.jsにMUI導入するのはなかなかにハード。_app.jsかindex.js、_document.jsどれが正解なのか。どれもエラーが発生する。
しょーがないので一旦Create.jsのなかにLayoutの中身を組み込んでいく。
また、warningがhttp://localhost:3000/Createからhttp://localhost:3000に遷移することで再発することが判明。
Createページ単体では問題ないのだが。_documentも効果なし。
https://qiita.com/eyuta/items/de33d26336c075845ebc
https://stackoverflow.com/questions/56317253/warning-prop-classname-did-not-match-material-ui-css-arbitrarily-breaks-on
再度直した。,{ name: "MuiExample_Component" }をmakeStylesの最後に追加することでうまく対応してくれるようになった。反映ごとに名前が変わってしまう仕様があったので最初から名前を固定して、それを更新するようにしたのか。クライアントとサーバーのデータの受け渡しの問題。
const useStyles=makeStyles({
field:{
marginTop:20,
marginBottom:20,
display:'block',
},
page:{
background:'#f9f9f9',
width:'100%'
},
drawer:{
width:drawerWidth
},
},{ name: "MuiExample_Component" })
この場合Layout コンポーネントはうまく組み込めないのでここは要確認。
下記にてcreate.jsを再構築中。drawerは埋め込めているので、いよいよapp bar との表示領域の調整に入る。
import { Button, Container, Typography } from "@mui/material"
import HailIcon from '@mui/icons-material/Hail'
import { makeStyles } from "@mui/styles"
import { TextField } from "@mui/material"
import { useState } from "react"
import { Drawer } from "@mui/material"
const drawerWidth=240
const useStyles=makeStyles({
field:{
marginTop:20,
marginBottom:20,
display:'block',
},
page:{
background:'#f9f9f9',
width:'100%'
},
drawer:{
width:drawerWidth
},
drawerPaper:{
width:drawerWidth
},
root:{
display:'flex'
}
},{ name: "MuiExample_Component" })
export default function Create(){
const classes=useStyles()
const [title,setTitle]=useState('')
const [details,setDetails]=useState('')
const [titleError,setTitleError]=useState(false)
const [detailsError,setDetailsError]=useState(false)
const handleSubmit=(e)=>{
e.preventDefault()
setDetailsError(false)
setTitleError(false)
if(title==''){
setTitleError(true)
}
if(details==''){
setDetailsError(true)
}
if(title&&details){
console.log(title,details)
}
}
return(
<Container>
<div className={classes.root}>
<div>
<Drawer
className={classes.drawer}
variant="permanent"
anchor="left"
classes={{paper:classes.drawerPaper}}
>
<Typography varient="h5">
notes
</Typography>
</Drawer>
</div>
<div>
<Typography
//className={classes.title}
varient="h6"
color="textSecondary"
gutterBottom
>
Createpage
</Typography>
<form noValidate autoComplete="off" onSubmit={handleSubmit}>
<TextField
onChange={(e)=>setTitle(e.target.value)}
className={classes.field}
label="Note Title"
variant="outlined"
color="secondary"
fullWidth
required
error={titleError}
/>
<TextField
onChange={(e)=>setDetails(e.target.value)}
className={classes.field}
label="Details"
variant="outlined"
color="secondary"
multiline
rows={4}
fullWidth
required
error={detailsError}
/>
<Button
//className={classes.btn}
type="submit"
varient="contained"
endIcon={<HailIcon />}
>
submit
</Button>
</form>
</div>
</div>
</Container>
)
}
