Gatsby.js：我为模板的正文设置了 css 规则，但它适用于整个应用程序
Gatsby.js: I set up a css rule for body for a template but it works throughout the entire app
我在模板的 body 标签中设置了一个带有 css (background-image) 的背景图片，以便只显示在使用它生成的页面中，但是这会影响整个 gatsby.js网站。
这是正常现象。这不是盖茨比的问题。这就是 React templating/code-splitting 的工作方式。
您在孤立的 CSS 中定义了一个 CSS 规则，但它在项目编译时被捆绑（由于 webpack）并且由于特殊性，它会影响所有 body标签。最后，您的模板也将被注入到输出中 HTML 因此其中的所有导入也将合并到最终输出中。
我认为最简单和最直接的解决方案是定义一个 <section>（或另一个标签）作为 body 的直接子代，用于每个要自定义的 template/page并给出一个特定的 class 名称以仅将 CSS 应用于那个 template/page。提高特异性是最简单的应用方式。
很快，在新的 Chromium 版本 (99) 中，我们将能够定义 layered components 以增强特异性并改善您所描述的那种行为。
我在模板的 body 标签中设置了一个带有 css (background-image) 的背景图片，以便只显示在使用它生成的页面中，但是这会影响整个 gatsby.js网站。
这是正常现象。这不是盖茨比的问题。这就是 React templating/code-splitting 的工作方式。
您在孤立的 CSS 中定义了一个 CSS 规则，但它在项目编译时被捆绑（由于 webpack）并且由于特殊性，它会影响所有 body标签。最后，您的模板也将被注入到输出中 HTML 因此其中的所有导入也将合并到最终输出中。
我认为最简单和最直接的解决方案是定义一个 <section>（或另一个标签）作为 body 的直接子代，用于每个要自定义的 template/page并给出一个特定的 class 名称以仅将 CSS 应用于那个 template/page。提高特异性是最简单的应用方式。
很快，在新的 Chromium 版本 (99) 中，我们将能够定义 layered components 以增强特异性并改善您所描述的那种行为。