使用 Mantine 用于 Nextjs 的无样式内容 Flash (FOUC)
我改用 Mantine 并按照这种方法解决了 FART（闪现） inAccurate color Theme），但网页遇到了新问题。在页面渲染之前，会出现一闪而过的 Unstyled 组件。如何解决这个问题？ 我查看了 Nextjs Github，发现有一些 FOUC 问题，但解决方案是添加 ，这对我来说不起作用。
此错误仅在生产中存在，在开发中它工作正常。
示例：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>
);
}
}
I switched to Mantine and followed this approach to solve the FART (Flash of inAccurate coloR Theme), but the webpage runs into a new issue. There is a flash of Unstyled component before the page renders. How to solve this issue?
I looked into Nextjs Github and there were issues few FOUC issues, but the solution was to add <script>0</script>, which didn't work for me.
This bug is only in production, in development it works fine.
Example: https://gotrip.vercel.app
If you don't see the flash, copy the link and paste it in the browser.
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>
);
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在经历了这个Github问题之后，我在我的项目中应用了三种解决方案，因为我有类似的解决方案问题。
如果有人遇到此问题，请尝试以下操作，它应该对您有用。
如果您尚未完成此操作，请使用此说明。
（注意：我建议也应用可选步骤）
如果您在 Vercel 上托管项目或进行本地开发 - 使用“yarn build”而不是 npm
如果您使用的是 12.1.6，请将 Next.js 降级到 12.1.5 或升级到更新的版本（@canary 版本）
我希望这可以解决您的问题。这是我的第一个答案，所以请友善:)
After going through this Github issue I applied three solutions to my project because I have had similar issues.
If anybody comes across this issue try the following it should work for you.
If you have not done it configure your Next.js project to work with Mantine using this instruction.
(NOTICE: I recommend applying the optional step also)
If you host your project on Vercel or for local development - use "yarn build" instead of npm
Downgrade Next.js to 12.1.5 if you are on 12.1.6 or upgrade to something newer (@canary versions)
I hope this solves your problem. This is my first answer so be kind :)