跳至内容
文档错误在 `_document` 中禁止使用 `styled-jsx`

在 `_document` 中禁止使用 `styled-jsx`

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

错误原因

在 自定义 Document 中不允许使用像 `styled-jsx` 这样的自定义 CSS。

可能的解决方法

如果您需要为所有页面共享 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`）将应用于应用程序中的所有页面和组件。