Gatsby.js：我为模板的 body 设置了一个 css 规则，但它适用于整个应用程序

Question

我在模板的 body 标签中设置了一个带有 css (background-image) 的背景图片，以便只显示在使用它生成的页面中，但这会影响整个 gatsby.js 网站中的所有“body”。

Answer 1

这是正常行为。 这不是盖茨比的问题。 这就是 React 的模板\/代码拆分的工作方式。

您在隔离的 CSS 中定义了 CSS 规则，但是在编译项目时它被捆绑在一起（因为 webpack），并且由于其特殊性，它会影响所有body<\/code>标签。 最后，您的模板也将被注入到输出 HTML 中，因此其中的所有导入也将合并到最终输出中。

我认为最简单和最直接的解决方案是将<section><\/code> （或另一个标签）定义为您要自定义的每个模板\/页面的body<\/code>的直接子级，并提供特定的类名以仅将 CSS 应用于该模板\/页面模板\/页面。