How to add a dynamic class to body tag in Gatsby.js? : <p>Obviously, that's not an easy task, as the only thing that changes in the <code>html.js</code> template file by default are the head meta tags and the content.</p>

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

<p>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.</p>

<p>I know that I could solve this by using the <code>exports.onRouteUpdate</code> in <code>gatsby-browser.js</code>, 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 <code>bundle.js</code> file, just generating the static site HTML.</p>
