如何在 Gatsby.js 中为 body 标签添加动态类？答案

【问题标题】：How to add a dynamic class to body tag in Gatsby.js?如何在 Gatsby.js 中为 body 标签添加动态类？
【发布时间】：2020-01-31 03:58:18
【问题描述】：

显然，这不是一件容易的事，因为默认情况下，html.js 模板文件中唯一更改的是头部元标记和内容。

元标记由 Helmet 组件（{head.title.toComponent()} 和 {head.meta.toComponent()}）处理，模板内的 HTML 更改由 React 管理。 (<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />)

然而，body 标签超出了 React 的范围，这就是为什么当我从一个页面导航到另一个页面时，我无法弄清楚如何即时更改它。这正是我所需要的，因为我想为每个页面应用不同的正文背景。

我知道我可以通过在gatsby-browser.js 中使用exports.onRouteUpdate 来解决这个问题，但是即使浏览器中禁用了JS，我也希望该类存在。意味着即使我在没有bundle.js 文件的情况下导出它，我也希望它在那里，只生成静态站点 HTML。

【问题讨论】：

标签： javascript reactjs gatsby

【解决方案1】：

React-helmet 现在也支持向 body 元素添加属性。

所以，如果你想给一个特定的组件/页面添加一个类，你可以这样做：

import Helmet from 'react-helmet'

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

// or

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

【讨论】：

谢谢！它确实解决了我的问题。我只需要yarn upgrade react-helmet && yarn start，然后我就看到了应用于 body 元素的类。

【解决方案2】：

看起来 react-helmet 支持在 <html> 元素上动态/静态地设置一个类。

虽然他们不想支持在 body 上设置类...https://github.com/nfl/react-helmet/issues/182

如果你真的需要支持 body 类，那么这个模块的作用与 react-helmet 非常相似，但针对的是 body 类https://github.com/iest/react-body-classname

【讨论】：

这至少不再是真的了，你可以通过bodyAttributes为带有头盔的body添加一个类
Facebook 是否会动态地读取 gatsby-helmet 添加的元数据？还是我必须使用 SSR？例如产品详细信息页面将显示不同的产品，所有产品都有自己的元数据动态注入标签