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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.