跳到內容
文件錯誤_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) 將會應用於你應用程式中的所有頁面和元件。