材质UI样式在页面刷新时消失

我正在将我的React应用程序转换为Next应用程序，以利用SSR。我使用材质ui 4进行样式设置。

我已经实现了_app.js和_document.js文件按照材料ui文档，但问题是，当页面第一次加载，材料ui样式不被应用，但当我在我的组件做一些改变，然后只有所有的样式出现。

我只在参考了这个，这个答案和其他资源之后才发布这个问题

_app.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);

_document.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.

也许是风格不匹配的问题?如果使用create-next-app

，reactStrictMode

默认是打开的。根据以下链接:https://github.com/mui/material-ui/issues/18018材质UI v4不是严格模式兼容，所以在那之前你可以尝试禁用reactStrictMode或使用材质UI v5。

// in next.config.js
module.exports = {
reactStrictMode: false
}

如果我误解了什么，我道歉!

我有同样的问题几天以下是我做的事情:

确保我的主题在src文件夹
我使用了这个文件夹结构和_document.js、_app.js和index.js在材料官方示例中提供的。确保遵循这些文件中提供的每一个细节。他们导入文件的方式，文件夹结构，主题和…
我关闭了SSR的组件，如页脚或一些其他静态数据，不需要通过添加nossr包装SSR。我的主题中有断点，导致刷新时中断css，因此在不需要时关闭SSR，使组件在客户端上完全加载:

import React from 'react';
import dynamic from 'next/dynamic';
const NoSSRWrapper = props => <React.Fragment>{props.children}</React.Fragment>;
export default dynamic(() => Promise.resolve(NoSSRWrapper), {
ssr: false,
});

import NoSSRWrapper from '../../components/NoSSRWrapper';
function func() {
return (
<NoSSRWrapper>
//your component
</NoSSRWrapper>
)
}

我还建议不要用redux包装你的_app.js，而是使用<Provider store={store}>像这样(_app.js的小细节很重要)

import store from '../utils/store';
return (
<Provider store={store}>
<ThemeProvider theme={theme}>
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</Provider>
)

相关内容

最新更新

热门标签：