如何在Gatsby.js中为body标签添加动态类？

Question

如何在Gatsby.js中为body标签添加动态类？

显然,这不是一件容易的事,html.js因为默认情况下模板文件中唯一改变的是头元标记和内容.

元标记由Helmet组件({head.title.toComponent()}和{head.meta.toComponent()})处理,模板内的HTML更改由React管理.(<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />)

然而,body标签超出了React的范围,这就是为什么当我从一个页面导航到另一个页面时,我无法弄清楚如何即时更改它.这正是我需要的,因为我想为每个页面应用不同的身体背景.

我知道我可以通过使用exports.onRouteUpdatein 来解决这个问题gatsby-browser.js,但是我希望即使在浏览器中禁用了JS,该类仍然存在.意味着即使我没有bundle.js文件导出,只是生成静态网站HTML,我希望它在那里.

Answer 1

小智 25

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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 8

2023 年 2 月：

自发布以来gatsby@5.5.0，执行此操作的首选方法是使用Gatsby Head API。（该gatsby-plugin-react-helmet插件已被弃用。）

在页面文件中，导出一个内部<Head>包含元素的组件<body className />：

export const Head = () => <body className="your-class-name" />

Run Code Online (Sandbox Code Playgroud)

您还可以与其他<Head>更改一起执行此操作，例如：

export const Head = () => (
  <>
    <html lang="en" />
    <title>Hello World</title>
    <meta name="description" content="Hello World" />
    <body className="home-page" />
  </>
)

Run Code Online (Sandbox Code Playgroud)

Answer 3

Kyl*_*ews 5

它看起来像 react-helmet 支持动态/静态地在<html>元素上设置一个类。

他们不想支持在身体上设置类... https://github.com/nfl/react-helmet/issues/182

如果你真的需要支持 body 类，那么这个模块会做一些与 react-helmet 非常相似的事情，但是对于 body 类https://github.com/iest/react-body-classname

这至少不再是真的，您可以通过`bodyAttributes`向带有头盔的身体添加一个类 (2认同)

归档时间：	9 年前
查看次数：	6211 次
最近记录：	6 年，10 月前