Blockchain code Metaverse VR

Crypto×VR×SmartContract(495)

スポンサーリンク

//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>
)
}

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.