如何在 Gatsby.js 的正文标签中添加动态 class？

Question

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

元标记由 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 来解决这个问题，但我希望 class 即使在浏览器中禁用 JS 也能存在。意味着即使我在没有 bundle.js 文件的情况下导出，我也希望它存在，只是生成静态站点 HTML.

Answer 1

看起来 react-helmet 支持 dynamically/statically 在 <html> 元素上设置 class。

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

如果您确实需要支持 body classes，那么此模块的功能与 react-helmet 非常相似，但 body classes https://github.com/iest/react-body-classname

Answer 2

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

因此，如果您想将 class 添加到特定的 component/page，您可以这样做：

import Helmet from 'react-helmet'

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

// or

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

如何在 Gatsby.js 的正文标签中添加动态 class？

How to add a dynamic class to body tag in Gatsby.js?

javascript

reactjs

gatsby