为什么nextjs刷新后所有的材质风格都会消失？

ao218c7q 于 2023-02-08 发布在其他

关注(0)|答案(3)|浏览(125)

我已经从materialui（https://material-ui.com/guides/server-rendering/）的文档中找到了解决方案，但我仍然不知道原因。
1.为什么样式在第一次渲染时有效，但在第二次渲染时消失？我知道SSR会在每次请求中生成带有css的html模板到客户端，所以样式应该仍然有效，因为它是注入到html模板中的。
1.文档中提到“在客户端，在移除服务器端注入的CSS之前，会第二次注入CSS”，但我不知道为什么要移除，CSS是在每个请求的html模板中注入的，所以不会在我的思维中造成任何崩溃，也不知道为什么移除注入的css后样式不会消失。

next.js

来源：https://stackoverflow.com/questions/67352231/why-all-styles-of-materialui-will-disappear-after-refresh-in-nextjs

3条答案

按热度按时间

bxjv4tth1#

如果您使用的是样式化组件，那么请执行以下操作，然后就可以开始了！
步骤1：npm安装--保存开发babel插件样式的组件
第二步：在下一个项目的根目录下创建一个文件[.babelrc
步骤3：将以下代码粘贴到.babelrc文件：-

{
             "presets": ["next/babel"],
             "plugins": [["styled-components", { "ssr": true }]]
         }

步骤4：重新启动下一台服务器

赞(0）回复(0）举报 2023-02-08

du7egjpx2#

在_应用程序. 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(),
        ]
    }
}

赞(0）回复(0）举报 2023-02-08

webghufk3#

我把它添加到我的next.config.js中，突然它就工作了，但我不记得为什么它工作了。

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    compiler: {
    // https://nextjs.org/docs/advanced-features/compiler
        // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
        styledComponents: true,
    },
};

module.exports = nextConfig;

赞(0）回复(0）举报 2023-02-08

我来回答

为什么nextjs刷新后所有的材质风格都会消失？

3条答案

相关问题

热门标签

最新问答