//tips
//smart contract
App barの組み込み作業に入る。
作成しながら作成画面と開発ツールでの表示領域を確認しているとMuiExample_Component-rootなど、表示がずれていることが確認できた。
ここでは下記が問題となっている。
root:{
display:'flex'
}
Flexの子要素に何が当たるのかが不明瞭のため一旦削除。
contents:{
// width:`calc(100% - ${drawerWidth}px)`,
textAlign: 'right',
を利用して右揃えにしようとしたがwidthを設定すると左にシフトする。
Appbarの場合は自動的にflexが働き、drawerとの左右の分割ができている。
.css-1c3zf87-MuiPaper-root-MuiAppBar-rootにflex機能が組み込まれており、これが機能しているよう。ただ、directionを確認すると上から下の方向でのflexなので左右分割に影響していない感じを受ける。
基本的な構造から見直す。drawerを入れた時の構造は下記。
return (
<div className={classes.root}>
{/* app bar */}
{/* side drawer */}
<Drawer
>
</Drawer>
{/* main content */}
<div className={classes.page}>
</div>
</div>
)
この流れでdrawerを実験していくと <div className={classes.page}>ではなく本内容を記載することで予期せぬ、分割が生じていることがわかった。一方で、コンポーネント内に単一文章を記載してみると、右ブロックにあたるものとして認識されていることがわかった。
つまり、layoutコンポーネントとして使用することで機能するものであることがわかる。
Layoutありきでの構成は現在childrenの引き渡しができないので使えない。
再度lauoutコンポーネントの作成は行うが、今回はflexboxなどで代用できるのではないかと考え、そちらの方法で模索する。
下記のようにBoXにて作成していく中で分かったことは、<Drawerのparmanentで指定してしまうとboxの要素などではなく、別の概念で表示がされてしまうため、要素の中身として扱えない。
import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
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"
import { AppBar } from "@mui/material"
import { Toolbar } 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" })
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
p: 1,
m: 1,
border: '1px solid',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}
// Item.propTypes = {
// sx: PropTypes.oneOfType([
// PropTypes.arrayOf(
// PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
// ),
// PropTypes.func,
// PropTypes.object,
// ]),
// };
export default function FlexGrow() {
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 (
<div style={{ width: '100%' }}>
<Box
sx={{ display: 'flex', p: 1, borderRadius: 1 }}
>
<Item >
<Drawer
className={classes.drawer}
variant="permanent"
anchor="left"
classes={{paper:classes.drawerPaper}}
>
<div>
<Typography varient="h5">
notes
</Typography>
</div>
</Drawer>
</Item>
<Item sx={{ flexGrow: 1 }}>
<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>
</Item>
</Box>
</div>
);
}
一旦layoutの挙動確認をする。
簡単にlayoutの挙動を確認するためだけのプロジェクトを作成。
import Navbar from "./Navbar";
const Layout = ({children}) => {
return (
<div className="content">
<Navbar />
{children}
</div>
);
}
export default Layout;
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div>
<h1>Homepage</h1>
<p>aaaaaaaaaaaaaaa</p>
</div>
)
}
import Link from 'next/link';
const Navbar = () => {
return (
<nav>
<div className="logo">
<h1>Ninja List</h1>
</div>
<Link href="/"><a>Home</a></Link>
<Link href="/about"><a>About</a></Link>
<Link href="/ninjas/"><a>Ninja Listing</a></Link>
</nav>
);
}
export default Navbar;
きちんと動作することを確認。
また、下記の初期に導入されているcssの特性を確認し、かぶりに気を付ける。
Layout.jsを適用させた形に元のプロジェクトを修正。
Index.jsを開いてみたがlayout部分は反映されない。
Console.logを随所に入れてみたが、_app.jsは実行されるが、その中のreturnに組み込まれているlayoutコンポーネントは読み込まれていない。
import * as React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
import Layout from '../components/layout';
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
export default function MyApp(props) {
console.log("going");
console.log(props);
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
console.log("app");
return (
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</CacheProvider>
);
}
console.log("app2");
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};
一旦clearして再度npm run devしたらlayoutが反映された。
Indexにアクセスした際の仕込んだconsoleの流れを確認。
app2:_app.jsの最外部
ctx:_documentのMyDocument.getInitialProps = async (ctx)
app0:_app.jsのexport default function MyApp(props)
app:app.jsのreturn手前
layout:layoutコンポーネント
Document:document.jsのexport default class MyDocument extends Document
あとは上記内容を下記のように繰り返す。
ctx
app0
app
layout
document
ctx
やっとlayoutを効果的につかえてdrawbarとappbarを的確に配置できた。
