Gatsby.jsのbodyタグに動的クラスを追加するには？

明らかに、これは簡単な作業ではありません。デフォルトでhtml.jsテンプレートファイルの変更がヘッドメタタグとコンテンツだけです。Gatsby.jsのbodyタグに動的クラスを追加するには？

メタタグはヘルメットコンポーネント（{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を生成しても、そこにあることを意味します。

出典

2016-12-06 Marcel Kalveram

反応ヘルメットは、<html>要素のクラスを動的/静的に設定するように見えます。

彼らはしかし体に設定クラスをサポートしたくない

... https://github.com/nfl/react-helmet/issues/182

あなたが本当に身体クラスをサポートする必要がある場合は、このモジュールはなく、身体クラスの-ヘルメットを反応させるのに非常によく似た何かをhttps://github.com/iest/react-body-classname

出典

2016-12-07 05:36:10

ニース1を！ありがとう、それは私が探していたものです。 –

リアクトヘルメットでは、ボディエレメントにも属性を追加することができます。あなたが特定のコンポーネント/ページにクラスを追加したい場合は

ので、あなたはこのような何かを行うことができます。

import Helmet from 'react-helmet' 

// Inside your component 
<Helmet 
    bodyAttributes={{ 
     class: 'newClassToBody' 
    }} 
/>

出典

2017-09-25 12:43:03

Gatsby.jsのbodyタグに動的クラスを追加するには？

答えて

関連する問題