如何在 Nextjs 自定义文档中为样式组件使用函数而不是类？

Question

如何在 Nextjs 自定义文档中为样式组件使用函数而不是类？

Thi*_*sta 5 reactjs styled-components next.js

我正在使用 NextJS 和样式组件。阅读下面的文档，我在 NextJS 中添加了一个自定义 _document.js 以使样式组件正常工作。

样式化组件文档

示例代码是用 React 类编写的，有没有办法将其转换为函数？

Answer 1

And*_*ras 8

从Next 11.1.1开始，这是可能的，感谢#28515，但该功能目前似乎尚未记录。
请参阅下面的示例：

import { Html, Head, Main, NextScript } from 'next/document'

const Document = () => (
  <Html>
    <Head/>
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
)

export default Document

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 1

答案是没有好的方法来做到这一点，我想你可以以某种方式覆盖它，但 Next.js 在其自定义运行时使用 _document 和 _app，并且覆盖它不是一个好主意。

_文档的目的：

自定义文档通常用于增强应用程序的 <html> 和 <body> 标记。

另请注意，不建议在 _document 内使用任何逻辑（除了 getInitialProps 内的逻辑）：https: //nextjs.org/docs/advanced-features/custom-document#caveats

归档时间：	4 年，8 月前
查看次数：	5895 次
最近记录：	4 年前