跳到内容
文档错误在 `_document` 中没有 `styled-jsx`

在 `_document` 中没有 `styled-jsx`

防止在 pages/_document.js 中使用 styled-jsx

为什么会出现此错误

自定义 CSS(如 styled-jsx)在自定义 Document中是不允许的。

可能的修复方法

如果您需要所有页面共享的 CSS,请查看自定义 App文件或定义自定义布局。

例如,考虑以下名为 styles.css 的样式表

styles.css
body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

创建一个 pages/_app.{js,tsx} 文件(如果尚不存在)。然后,导入 styles.css 文件。

pages/_app.js
import '../styles.css'
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

这些样式 (styles.css) 将应用于您应用程序中的所有页面和组件。