根据当前路径更改导航样式 Gatsbyjs

Question

我是 Gatsby Js 的新手，我很难理解如何根据当前路径更改 Header 组件样式。 Header 组件对所有页面都是通用的，但是当我导航到其他页面（如 /portfolio 和 /team）时，样式应该会略有变化。由于 Gatsby SSR 在第一页加载时的路径为“/portfolio 或 "team" 时，header 的正确样式不会更改，因为修改 [=18 的类名的代码=] 组件发生在浏览器中。有没有办法使用浏览器 API 或 SSR API 来 add/remove Header 组件的正确类名？我希望我做到了够清楚了。

Answer 1

其实很简单。 Gatsby 带有一个方便的插件，名为 react-helmet make sure you have it inside your package.json if you don't, check the Docs 用于安装。

您需要做的就是在目标页面中导入 helmet，例如 portfolio.js

import { Helmet } from 'react-helmet'

在 <SEO> 组件之后，添加 Helmet 组件并在 bodyAttributes 元素中定义一个 CSS class，如下所示：

<Helmet bodyAttributes={{ class: 'portfolio-page' }} />

这会将 portfolio-page class 添加到页面 body 标记中，因此，您可以像使用常规 CSS 一样定位 class classes.

.portfolio-page .your-navigation {
   background-color: black;
}

这里有一个 codeSandbox 的实例。检查 page-2.js 和 components > layout.css

根据当前路径更改导航样式 Gatsbyjs

Change navigation styles depending on the current path Gatsbyjs

styling

reactjs

gatsby