我正在将我的React应用转换为Next应用,以利用SSR。我正在使用Material UI 4进行造型。
我已经按照材质UI文档实现了_app.js
和_document.js
文件,但问题是当页面第一次加载时,材质UI样式没有被应用,但当我在组件中进行一些更改时,只有所有样式出现。
我是在参考this、this答案和Internet上的其他资源后才发布此问题的
_应用程序.js
import '@assets/fonts/global.css';
import React, {useState, useEffect} from "react";
import Layout from "@layout/Layout";
import Footer from "@layout/Footer/Footer";
import Header from "@layout/Header/Header";
//import Sidebar from "@layout/Sidebar/Sidebar";
//Material UI
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "@helper/theme/theme";
import {ThemeProvider as MuiThemeProvider} from "@material-ui/styles";
//Redux
import {wrapper} from "@store/store";
function MyApp({Component, pageProps}) {
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
return (
<>
<MuiThemeProvider theme={theme}>
<CssBaseline/>
<Header/>
<Layout>
<Component {...pageProps} />
</Layout>
<Footer/>
</MuiThemeProvider>
</>
);
}
export default wrapper.withRedux(MyApp);
_文件.js
import React from 'react';
import Document, {Html, Head, Main, NextScript} from 'next/document';
import {ServerStyleSheets} from '@material-ui/core/styles';
import theme from "@helper/theme/theme";
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<meta name="theme-color" content={theme.palette.primary.main} />
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
console.log('DOC Called');
// Render app and page and get the context of the page with collected side effects.
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()],
};
};
- 注意:即使按照材质ui文档使用
_app.js
和_document.js
文件后,我仍然在控制台中收到以下警告 *
next-dev.js?3515:25 Warning: Prop `className` did not match.
型
3条答案
按热度按时间jogvjijk1#
可能是样式不匹配的问题?如果使用
create-next-app
,则默认情况下reactStrictMode
处于打开状态根据以下链接这里:https://github.com/mui/material-ui/issues/18018材质UI v4与严格模式不兼容,因此在此之前,您可以尝试禁用reactStrictMode或使用材质UI v5。
如果我误解了什么,我道歉!
vjhs03f72#
添加
_document.tsx
到你的项目和粘贴这一个.添加主题 meta标记和用户ServerStyleSheet以及next.config.js
o2rvlv0m3#
我有同样的问题好几天了,以下是我做的事情:
_document.js
和_app.js
和index.js
提供在材料official example。确保遵循每一个细节提供在每一个这些文件。他们的方式的东西是进口,他们的文件夹结构,主题和...SSR
的组件,如页脚或一些其他静态数据,不需要SSR
添加nossr
Package 器。我有断点在我的主题,导致打破刷新css
,所以关闭SSR时,不需要使组件完全加载到客户端:另外,我建议不要用redux Package
_app.js
,而是使用<Provider store={store}>
,类似于这样(_app.js的小细节很重要)型