如何在 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