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

问题

Obviously, that's not an easy task, as the only thing that changes in the html.js template file by default are the head meta tags and the content.

The meta tags are handled by the Helmet component ({head.title.toComponent()} and {head.meta.toComponent()}) and the HTML changes inside the template are managed by React. (<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />)

The body tag however is outside the scope of React, which is why I can't figure out how to change it on-the-fly when I navigate from page to page. That's exactly what I'd need though as I wanna apply a different body background to each page.

I know that I could solve this by using the exports.onRouteUpdate in gatsby-browser.js, but I would like the class to be present even if JS is disabled in the browser. Means I'd like it to be there even if I export without the bundle.js file, just generating the static site HTML.

回答1:

It does look like react-helmet supports dynamically/statically setting a class on the <html> element.

They don't want to support setting classes on the body though... https://github.com/nfl/react-helmet/issues/182

If you really need to support body classes, then this module does something very similar to react-helmet but for body classes https://github.com/iest/react-body-classname

回答2:

React-helmet now supports adding attributes to body element as well.

So, if you want to add a class to a specific component/page, you can do something like this:

import Helmet from 'react-helmet'

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

// or

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

来源：https://stackoverflow.com/questions/40995948/how-to-add-a-dynamic-class-to-body-tag-in-gatsby-js

标签

javascript

reactjs

gatsby