Javascript 如何向Gatsby.js中的body标记添加动态类？_Javascript_Reactjs_Gatsby

Javascript 如何向Gatsby.js中的body标记添加动态类？

javascript reactjs gatsby

Javascript 如何向Gatsby.js中的body标记添加动态类？,javascript,reactjs,gatsby,Javascript,Reactjs,Gatsby,显然，这不是一项容易的任务，因为默认情况下，html.js模板文件中唯一更改的是头元标记和内容元标记由头盔组件（{head.title.toComponent（）}和{head.meta.toComponent（）}）处理，模板内的HTML更改由React管理。（）然而，body标签不在React的范围内，这就是为什么我无法在从一页导航到另一页时动态地修改它的原因。这正是我需要的，因为我想在每个页面上应用不同的主体背景我知道我可以通过使用gatsby browser.js中的exports

显然，这不是一项容易的任务，因为默认情况下，

html.js

模板文件中唯一更改的是头元标记和内容

元标记由头盔组件（

{head.title.toComponent（）}

和

{head.meta.toComponent（）}

）处理，模板内的HTML更改由React管理。（

）

然而，body标签不在React的范围内，这就是为什么我无法在从一页导航到另一页时动态地修改它的原因。这正是我需要的，因为我想在每个页面上应用不同的主体背景

我知道我可以通过使用

gatsby browser.js

中的

exports.onRouteUpdate

来解决这个问题，但是我希望即使在浏览器中禁用了js，这个类仍然存在。意味着我希望它在那里，即使我导出时没有

bundle.js

文件，只是生成静态站点HTML。

它看起来确实支持动态/静态地在

元素上设置类

他们不想支持在身体上设置课程

如果您确实需要支持身体类，那么此模块将执行与react头盔非常类似的操作，但对于身体类，react头盔现在也支持向身体元素添加属性

因此，如果要将类添加到特定组件/页面，可以执行以下操作：

import Helmet from 'react-helmet'

// Inside your component
<Helmet
    bodyAttributes={{
        class: 'new-class-for-body'
    }}
/>

// or

<Helmet>
    <body className="new-class-for-body" />
</Helmet>

从“反应头盔”导入头盔
//在组件内部
//或

不错！谢谢，这就是我一直在寻找的。这至少不再是真的，你可以通过

bodyAttributes

将一个类添加到带有头盔的body中，facebook是否读取动态添加到盖茨比头盔中的元数据？还是我必须使用SSR？e、 g.产品详细信息页面将显示不同的产品，所有产品都动态地将其自己的元数据注入tagThank！它确实解决了我的问题。我只需要

纱线升级和纱线开始，然后我看到该类应用于body元素。它对我有效。