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

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

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.