0

我最近8.0.3从.js 升级到 Next.js，6.1.1现在我的标题内容正在使用styled-jsx. 它在更新 Next.js 之前加载得很好。

正在闪烁的标头代码是一个自定义构建的 npm 模块，它使用styled-jsx（但不是next）并被导入并放置到与每个next页面一起呈现的布局页面中。

这是_document.js更新前文件中的实现next，它正在工作：

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>
    )
  }
}

根据文档，我也尝试过这个（我等待初始道具）：

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>
    )
  }
}

闪存可能是我在哪里实现模块但不确定的结果。

似乎来自模块的代码没有与其余页面正确捆绑，从而使页面闪烁。任何想法或反馈将不胜感激。

4

1 回答 1

0

我最终通过将自定义 npm 模块重构为不使用 styled-jsx 而是使用 styled-components 解决了这个问题。不是真正的修复，而是更多的解决方法

于 2019-04-02T20:11:18.473 回答