如何在 Next.JS 中給 css 添加動態內容

Question

我正在學習 Next.JS，雖然我了解如何使用 getStaticProps 從無頭 CMS 獲取動態內容並使其在我的 JSX 模板中可用，但我看不到我應該如何在我的 CSS 中訪問/使用它。 在我使用過的其他 SSG 生成器中，您可以使用模板引擎使用 css 插入動態內容，例如

body {
    background: url('{{urlFromMyHeadlesCMS}}')
}

我可以想到幾種我可能會嘗試並完成此操作的方法，但它們感覺有些笨拙，例如通過 javascript 設置我想要的 styles 或使用樣式化組件字符串插值。 在 Next.JS 中是否有更清潔、更規范的方法來完成此任務？ 我終於有時間學習 SASS 了嗎？

Answer 1

我覺得styled-jsx以及css.global謂詞之類的東西會滿足您的需要

/* styles.js */
import css from 'styled-jsx/css'

// Global styles
export const body = css.global`body {  background: url('{{urlFromMyHeadlesCMS}}') }`

注意事項

我可以想到幾種我可能會嘗試並完成此操作的方法，但它們感覺有些笨拙，例如通過 javascript 設置我想要的 styles 或使用樣式化組件字符串插值。

在 Next.JS 中是否有更清潔、更規范的方法來完成此任務

我不確定上述陳述是否排除了我的解決方案，但可以另外解決。