使用React头盔在特定页面上更改Navbar颜色？

问题描述

所以我的主页上有一个透明的导航栏背景，但是当我导航到服务页面到＃000时，我需要它来更改背景颜色。

我想出了如何使用头盔更改页面背景的方法，但是我不知道如何定位导航栏并更改颜色，因为我使用的是在每个页面上呈现的布局组件。

         const Layout = ({ children }) => {
      return (
        <>
          <Helmet bodyAttributes={{ class: "image-page" }} />
          <Navbar />
          <main>{children}</main>
          <Footer />
        </>
      )
    }

解决方法

您需要获取location from the default's Gatsby's props才能进行检查。

在<Navbar>组件内部，您需要通过location获取props，并在其与您的服务页面匹配时为其添加类名。看起来应该像这样：

const Navbar= ({ location }) => {
  return <div className={`${location.pathname === /services/} ? 'whiteClassName': 'regularClassName'`}>Your navbar content</div>
}

与在children组件中分解<Layout>的方式相同，您可以对location进行完全相同的操作。由于它是默认的prop，因此随处可见。拥有当前位置后，仅在条件适合元素时添加一个自定义类，并使CSS变得神奇。