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

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>

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

Tags:

Javascript

Reactjs

Gatsby

Recent Posts