//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()],
};
};
一回どなたかに中身を解説してもらわねばならん。
