小编Roh*_*hit的帖子

我切换到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' …