为什么在nextjs中刷新后，所有的materialui样式都会消失？
为什么在nextjs中刷新后，所有的materialui样式都会消失？
提问于 2021-05-02 01:24:05
我已经从materialui (https://material-ui.com/guides/server-rendering/)的医生那里找到了解决方案，但我仍然不知道原因。
- 为什么这种样式在第一次呈现时起作用，而在第二次呈现时消失？我知道SSR会在每个请求的客户端生成带有css的html模板，所以样式应该仍然有效，因为它被注入到html模板中。
。
- 在文档中提到，“在客户端，将在删除服务器端注入CSS之前第二次注入CSS。”但是，我不知道为什么要把它移除。CSS是在每个请求的html模板中注入的，因此它不会在我的思维中造成任何崩溃，以及为什么在删除注入的css.
之后样式不会消失。
回答 2
Stack Overflow用户
发布于 2022-08-25 07:47:53
如果您使用样式-组件，然后做以下工作，您是好的去！
步骤1: npm安装-保存-dev babel-插件样式-组件
步骤2:在下一个项目的根目录中创建一个文件.babelrc
步骤3:将以下代码粘贴到.babelrc文件：-
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}步骤4:重新启动下一个服务器
Stack Overflow用户
发布于 2022-03-04 11:04:55
在_app.js中
function MyApp({ Component, pageProps }) {
useEffect(() =>{
const jssStyles = document.querySelector('#jss-server-side');
if(jssStyles){
jssStyles.parentElement.removeChild(jssStyles);
}
},[]);
return <Component {...pageProps} />
};然后在pages文件夹中打开_document.js：
import React from 'react';
import { ServerStyleSheets } from "@mui/styles";
import Document, { Html, Main, NextScript, Head } from "next/document";
export default class MyDocument extends Document{
render(){
return(
<Html lang="en">
<Head></Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
)
}
}
MyDocument.getInitialProps = async(ctx) =>{
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>{
return originalRenderPage({
enhanceApp: ( App ) => ( props ) => sheets.collect(<App { ...props}
/>)
})
};
const initialProps = await Document.getInitialProps( ctx);
return{
...initialProps,
styles:[
...React.Children.toArray(initialProps.styles) ,
sheets.getStyleElement(),
]
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67352231
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号