显然,这不是一件容易的事,因为 html.js
中唯一改变的是模板文件默认是 head meta 标签和内容。
元标记由 Helmet 组件({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。
最佳答案
React-helmet 现在也支持向 body 元素添加属性。
所以,如果你想给特定的组件/页面添加一个类,你可以这样做:
import Helmet from 'react-helmet'
// Inside your component
<Helmet
bodyAttributes={{
class: 'new-class-for-body'
}}
/>
// or
<Helmet>
<body className="new-class-for-body" />
</Helmet>
关于javascript - 如何将动态类添加到 Gatsby.js 中的 body 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40995948/