Javascript 根据Gatsby.js中的当前路径更改导航样式

使用require（），我可以让CSS从A页切换到B页。。。但是当返回到A页时，它会保持B页的样式表处于活动状态，即使这两个页都需要（）它们自己的特定样式表。当我通过与当前URL（location.pathname）进行比较而需要（）样式表时，也会发生同样的情况。在盖茨比实现这一点最简单的方法是什么

我所尝试的：

import React from 'react'
import Layout from '../components/Layout'
import Header from '../components/Home/Header'
import style from "../templates/module.main.css";

const IndexPage = () => {

  return (
    <Layout className={style}>
      <Header />
    </Layout>
  )
}

export default IndexPage

从“React”导入React
从“../components/Layout”导入布局
从“../components/Home/Header”导入标题
从“./templates/module.main.css”导入样式；
常量索引页=（）=>{
返回(
)
}
导出默认索引扩展

从“React”导入React
从“../components/Layout”导入布局
从“../components/Home/Header”导入标题
从“./templates/module.secondary.css”导入样式；
常量IndexPageTwo=（）=>{
返回(
)
}
导出默认索引expagetwo

使用css模块，它将样式链接到页面/组件

SCS的示例：

styleA.module.scss：

.page {
background: red
}

.page {
background: blue
}

PageA.tsx：

import style from "./styleA.module.scss";
export default () => <div className={style.page}>Test</div>

第b.tsx页：

import style from "./PageB.module.scss";
export default () => <div className={style.page}>Test</div>

从“/PageB.module.scss”导入样式；
导出默认值（）=>测试

好的，我认为对我来说最好的解决方案是使用react头盔，并像这样瞄准班级：

<Helmet bodyAttributes={{ class: 'pageTwo' }} />

---

谢谢你的回答，让我试试。我在返回A页时仍然有问题，它会保持B页的样式表处于活动状态。这是我使用CSS而不是SASS的原因吗？请共享您的代码，CSS或scss不会影响此行为。您可以在我的问题中看到上面更新的代码。我使用了两个样式表，但当我更改路径时，它会保持第一个样式表处于活动状态

<Helmet bodyAttributes={{ class: 'pageTwo' }} />

.pageTwo .navbar {
   color: black;
}