How to add a dynamic class to body tag in Gatsby.js?
Question
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.
2 answers
solution1
58 2017-09-25 12:43:03
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>
solution2
4 ACCPTED 2016-12-07 05:36:10
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.