material-ui - Nextjs with material-ui: Prop `className` 不匹配。服务器:
问题描述
我正在创建一个使用 React Material-Ui 的 NextJS 应用程序,但我收到了Prop 'className' did not match.
错误,即使我根据文档更改了我的_app.tsx
和。_document.tsx
我的_app.tsx
:
// pages/_app.tsx
/* eslint-disable react/jsx-props-no-spreading */
import { FC, useEffect } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import { AppProps } from 'next/app';
import Head from 'next/head';
import { defaultTheme as theme } from '../src/themes';
const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles?.parentElement?.removeChild(jssStyles);
}
}, []);
return (
<>
<Head>
<title>My App</title>
<meta
name="viewport"
content="minimum-scale=1, 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>
</>
);
};
export default MyApp;
我的_document.tsx
:
import React from 'react';
import Document, {
Html,
Head,
Main,
NextScript,
DocumentProps,
DocumentContext,
} from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import { defaultTheme as theme } from '../src/themes';
export default class MyDocument extends Document {
static getInitialProps = async (ctx: DocumentContext) => {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement(),
],
};
};
render() {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<meta
name="theme-color"
content={theme.palette.primary.main}
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,800,900&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
浏览器控制台错误:
Warning: Prop `className` did not match. Server: "MuiBox-root MuiBox-root-10" Client: "MuiBox-root MuiBox-root-13"
div
StyledComponent@webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:22
div
Grid@webpack-internal:///./node_modules/@material-ui/core/esm/Grid/Grid.js:236:29
WithStyles@webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:25
div
Grid@webpack-internal:///./node_modules/@material-ui/core/esm/Grid/Grid.js:236:29
WithStyles@webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:25
div
Container@webpack-internal:///./node_modules/@material-ui/core/esm/Container/Container.js:85:17
WithStyles@webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:25
div
StyledComponent@webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:22
div
StyledComponent@webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:22
Home@webpack-internal:///./pages/index.tsx:93:17
ThemeProvider@webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:42:18
MyApp@webpack-internal:///./pages/_app.tsx:37:19
ErrorBoundary@webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47
ReactDevOverlay@webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:20
Container@webpack-internal:///./node_modules/next/dist/client/index.js:254:20
AppContainer@webpack-internal:///./node_modules/next/dist/client/index.js:750:18
Root@webpack-internal:///./node_modules/next/dist/client/index.js:889:19
我只是无法弄清楚发生了什么。有什么建议吗?
解决方案
在 next.config.js 中将 'reactStrictMode' 设置为 false 似乎可以解决问题
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: false,
}
我真的不知道为什么会这样。如果有人知道,请随时在评论中解释
推荐阅读
- c# - 子页面的绝对超链接
- python - 在不使用 for 循环的情况下在 pandas 中执行此操作的正确方法
- reactjs - 如何在 Django 和 React 中跟踪匿名会话
- python - 对dict值的懒惰评估?
- python - Dataloader 对象不绘制绘图的问题
- typescript - 如何在“onChange”事件中获取 office-ui-fabric-react Dropdown 的 ID?
- javascript - 忽略数组中的元素值时获取最小索引
- javascript - 按数据属性过滤 DataTable.js 行
- pdf - Ghostscript OCR 和输出文件
- python-3.x - 在 QGraphicsPixmapItem 中打开上下文菜单时,如何删除此 QGraphicsLineItem?