如何在 Next.JS 中向 css 添加动态内容答案

【问题标题】：How to add dynamic content to css in Next.JS如何在 Next.JS 中向 css 添加动态内容
【发布时间】：2022-01-23 00:27:37
【问题描述】：

我正在学习 Next.JS，虽然我了解如何使用 getStaticProps 从无头 CMS 获取动态内容并使其在我的 JSX 模板中可用，但我不知道我应该如何在我的 CSS 中访问/使用它.在我使用过的其他 SSG 生成器中，您可以使用模板引擎使用您的 css 插入动态内容，例如

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

我可以想出几种方法来实现这一点，但它们感觉有些笨拙，例如通过 javascript 或使用样式化组件字符串插值设置我想要的样式。在 Next.JS 中是否有更清洁、更规范的方式来完成此任务？我终于可以开始学习 SASS 了吗？

【问题讨论】：

标签： css next.js

【解决方案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 或使用样式化组件字符串插值设置我想要的样式。

在 Next.JS 中是否有一种更简洁、更规范的方式来实现这一点

我不确定上述陈述是否排除了我的解决方案，但可以另外解决。

【讨论】：