Blockchain code Metaverse VR

Crypto×VR×SmartContract(494)

スポンサーリンク

//tips

//smart contract

theme.mixins.toolbarとは、AppBarと併用して使うときに、適切な高さのサイズを教えてくれるもので、makeStylesの中でtoolbarなどに対して設定するもののよう。

toolbar: theme.mixins.toolbar,

これによりAppBarの高さのサイズだけ、空白をつくり、mainのコンテンツがAppBarと重ならないように対応することが可能になる。

flex-growプロパティは、フレックスコンテナの幅に余白がある場合の、アイテムの伸び率を指定するものでflexgrow:1とすることで横幅いっぱいまで広げることができる。

Nft画像部分はavatarコンポーネントが使えるようなので、コメントやログイン表示などに表示させることも検討する。

https://mui.com/components/avatars/

ページに戻って、下記二つの表示領域のずれを解消していく。

<div class="MuiDrawer-root MuiDrawer-docked css-1f2xuhi-MuiDrawer-docked">

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper">

どうやらdrawコンポーネントをimportすることで問題が発生しているよう。

一旦新たにプロジェクトを作成してmui用の雛形を作成した方が良さそう。

npx create-next-app muidemo

Robotoフォントの導入は_app.js及び_document.jsの編集で対応。これでページごとに設定する必要がなくなる。

https://github.com/mui/material-ui/tree/master/examples/nextjs/pages

Macでvsコードのターミナル内の複数行を削除するのはControl+Kキーを使用。カーソル位置から行の末尾まで消去。

updateされているnpmをimport。

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components
npm install --save @emotion/css @emotion/server
npm install @mui/icons-material
npm install @mui/styles

進めていくうちにHydrationエラーが発生。

Server: "MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root makeStyles-field-14 css-wb57ya-MuiFormControl-root-MuiTextField-root"

Client: "MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root makeStyles-field-1 css-wb57ya-MuiFormControl-root-MuiTextField-root"

makeStyles-field-14とmakeStyles-field-1 のようにクライアント側のHTMLが指定しているclassは変更前にビルドされたものなので、サーバー側で更新されるとclass名が異なってしまいエラーが発生するよう。

下記を読みながら修正。

https://qiita.com/sobameshi0901/items/a3a95b88770a52f1f31c

React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);

これでも効果なし。

https://github.com/vercel/next.js/issues/7322

https://github.com/styled-components/babel-plugin-styled-components/issues/78#issuecomment-361160935

babel-plugin-styled-componentsを導入してみる。

https://www.npmjs.com/package/babel-plugin-styled-components

一撃でクリアした!さすがすぎる。

_app.jsと_documentを元に戻したら、エラーが復活してしまうので両方必要なよう。

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

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export default function MyApp(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);
}
}, []);

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 />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}

MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};

import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

import { ServerStyleSheets } from '@material-ui/core/styles';

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
{/* <link rel="shortcut icon" href="/static/favicon.ico" /> */}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
{/* Inject MUI styles first to match with the prepend: true configuration. */}
{this.props.emotionStyleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render

//追加
const sheets = new ServerStyleSheets();

const originalRenderPage = ctx.renderPage;

// You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);

ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) =>
function EnhanceApp(props) {
return sheets.collect(<App emotionCache={cache} {...props} />);
},
});

const initialProps = await Document.getInitialProps(ctx);
// This is important. It prevents emotion to render invalid HTML.
// See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={`${style.key} ${style.ids.join(' ')}`}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));

return {
...initialProps,
emotionStyleTags,
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};

一回どなたかに中身を解説してもらわねばならん。

人気の記事

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.