使用Next.js 8和styled-jsx时的强烈FOUC
使用Next.js 8和styled-jsx时的强烈FOUC
提问于 2019-03-08 01:52:03
我最近从6.1.1升级到了Next.js 8.0.3，我现在遇到了一个非常强烈的非样式内容( for )，我的标题内容使用了styled-jsx。在更新Next.js之前，它加载得很好。
闪烁的头代码是一个定制的npm模块，它使用styled-jsx (而不是next)，并被导入并放置到一个布局页面中，该页面与每个next页面一起呈现。
这是在更新next之前在_document.js文件中的实现，它正在工作：
import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet, injectGlobal } from 'styled-components'
import styledNormalize from 'styled-normalize'
import flush from 'styled-jsx/server'
injectGlobal`
${styledNormalize}
`
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const sheet = new ServerStyleSheet()
const page = renderPage(App => props =>
sheet.collectStyles(<App {...props} />)
)
const styleTags = sheet.getStyleElement()
const styles = flush()
return { ...page, styleTags, styles }
}
render() {
return (
<html>
<Head>
{this.props.styleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}基于docs，我也尝试了这个(在这里我等待初始的道具)：
import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet, injectGlobal } from 'styled-components'
import styledNormalize from 'styled-normalize'
import flush from 'styled-jsx/server'
injectGlobal`
${styledNormalize}
`
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const page = ctx.renderPage(App => props =>
sheet.collectStyles(<App {...props} />)
)
const initialProps = await Document.getInitialProps(ctx)
const styleTags = sheet.getStyleElement()
const styles = flush()
return { ...initialProps, ...page, styles, styleTags }
}
render() {
return (
<html>
<Head>
{this.props.styleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}闪存可能是我在哪里实现模块的结果，但不确定。
似乎来自模块的代码没有正确地与其余页面捆绑在一起，从而使页面闪现。任何想法或反馈都将不胜感激。
回答 1
Stack Overflow用户
发布于 2019-04-03 04:11:18
我最终通过重构自定义npm模块来修复这个问题，使其不使用styled jsx，而是使用styled component。不是真正的修复，而是更多的工作
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55050039
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号