使用 Mantine 用于 Nextjs 的无样式内容 Flash (FOUC)

Question

使用 Mantine 用于 Nextjs 的无样式内容 Flash (FOUC)

Roh*_*hit 12 production fouc reactjs next.js mantine

我切换到Mantine并按照这种方法解决了FART（不准确的颜色主题的Flash），但网页遇到了新问题。在页面渲染之前，会出现一闪而过的 Unstyled 组件。如何解决这个问题？我查看了 Nextjs Github，发现有一些 FOUC 问题，但解决方案是添加<script>0</script>，这对我来说不起作用。

此错误仅在生产中存在，在开发中它工作正常。

示例： https: //gotrip.vercel.app 如果您没有看到 Flash，请复制链接并将其粘贴到浏览器中。

import Document, { Html, Head, Main, NextScript } from "next/document";
import { createGetInitialProps } from "@mantine/next";

const getInitialProps = createGetInitialProps();

export default class _Document extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx);
        return { ...getInitialProps, ...initialProps };
    }

    render() {
        const setInitialTheme = `
      function getUserPreference() {
        if(window.localStorage.getItem('theme')) {
          return window.localStorage.getItem('theme')
        }
        return window.matchMedia('(prefers-color-scheme: dark)').matches 
          ? 'dark' 
          : 'light'
      }
      document.body.dataset.theme = getUserPreference();
    `;
        return (
            <Html>
                <Head />
                <body>
                    <script dangerouslySetInnerHTML={{ __html: setInitialTheme }} />
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 2

在解决了这个Github 问题之后，我在我的项目中应用了三种解决方案，因为我也遇到过类似的问题。

如果有人遇到此问题，请尝试以下操作，它应该对您有用。

如果您还没有这样做，请使用此指令配置您的 Next.js 项目以与 Mantine 一起使用。（注意：我建议也应用可选步骤）
如果您在 Vercel 上托管项目或进行本地开发 - 使用“yarn build”而不是 npm
如果您使用的是 12.1.6，请将 Next.js 降级到 12.1.5 或升级到更新的版本（@canary 版本）

我希望这能解决您的问题。这是我的第一个答案，所以请友善:)

归档时间：	3 年，7 月前
查看次数：	6522 次
最近记录：	2 年，11 月前