在 Next.js 博客上的 HEAD 中添加內聯樣式表

Question

我在 Jekyll 中有一個博客 ( http://minid.net )，我想遷移到 Next.js。 我的博客不使用外部文件作為樣式。 我使用 STYLE 元素將所有樣式嵌入到 HEAD 元素中。 在 Next.js 中，我創建了一個 Style.js 組件，它返回 body {} 但會引發錯誤。

export default function Styles() {
  return <style>body{background: red;}</style>;
}

我的博客受益於不必使用外部文件，每個生成的 HTML 都有自己的樣式，所以我不想為 Next.js 使用傳統的全局樣式表。

我該如何解決這個問題？

Answer 1

閱讀文檔的這一部分： https ://nextjs.org/docs/basic-features/built-in-css-support#css-in-js

總之，您必須將style元素的子元素放在括號中的字符串內。

export default function Styles() {
  return (
    <style jsx>{`
      body{
        background: red;
      }
    `}</style>;
}