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

Question

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

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

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

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

Answer 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>

Answer 2

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

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

如果你真的需要支持 body 类，那么这个模块会做一些与 react-helmet 非常相似的事情，但是对于 body 类https://github.com/iest/react-body-classname

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

问题描述

2 个解决方案

解决方案1
58 2017-09-25 12:43:03

解决方案2
4 已采纳 2016-12-07 05:36:10

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

问题描述

2 个解决方案

解决方案1 58 2017-09-25 12:43:03

解决方案2 4 已采纳 2016-12-07 05:36:10

解决方案1
58 2017-09-25 12:43:03

解决方案2
4 已采纳 2016-12-07 05:36:10