在Gatsby中使用ActiveClassName和CSS模块向活动链接添加样式无效

当我尝试实现这一点时，我面临一个问题：使用ActiveClassName选项

我创建了一个navbar.js组件，其中包含以下链接：

import React from "react";
import { Link } from "gatsby";

import navbarStyles from "./navbar.module.css";

export default function Navbar() {
  return (
    <nav className={navbarStyles.navbar}>
      <ul>
        <li>
          <Link to="/contact/" activeClassName="active">
            Contact
          </Link>
        </li>
        <li>
          <Link to="/blog/" activeClassName="active">
            Blog
          </Link>
        </li>
      </ul>
    </nav>
  );
}

我的导航栏链接默认颜色正确#FFF 当我转到相应页面时，我的链接已正确更新为活动类，例如：

<a aria-current="page" class="active" href="/contact/">Contact</a>

但是.活动样式从不应用于活动链接：（（黑色）

奇怪的是，当我从navbar.module.CSS中提取“.active”CSS并将其放入我的global.CSS文件时，一切都正常了

我怎样才能使我的样式保持在CSS模块中

谢谢你的帮助

奇怪的是，当我从 然后把它放在我的global.css文件中 工作

很明显，您的样式在CSS代码中的某个地方被过度引用了。请检查CSS资产的导入，并检查元素以检查当前样式的来源（检查检查器中的“计算”选项卡）

您的代码和CSS规则完全有效，尽管存在混合。您也可以尝试以下方法：

      <Link to="/blog/" activeClassName={navbarStyles.active}>
        Blog
      </Link>

博客

问题是您在使用

activeClassName=“active”

的同时，您应该使用映射类：

activeClassName={navbarStyles.active}

。您没有任何名为

navbar

的类，但您正试图将该样式应用于

nav

元素：

className>={navbarStyles.navbar}

但我建议使用package，它引入了一种更具声明性的应用样式的方式，它是修补

className

s，而不是修补您

---

您可以将

PatchStyles

与

extraParams={'activeClassName'}

一起使用，使其也成为patch

activeClassName

s。有关更多详细信息，请参见示例。（在StackBlitz示例中，单击

首页

链接，查看如何自动激活活动样式）.

Hi！当我检查元素时，我可以看到我的标准“链接”样式是来自navbar.module.css的样式，但是“.active”样式只有在global.css中设置时才起作用！还尝试了activeClassName={navbarStyles.active}，但这会导致不正确的链接

我肯定会错过一些简单的东西：（我添加了一个精度，我尝试在navbar.module.css和global.css文件中放置

.active

和

nav ul li a.active

选择器，每次都使用不同的颜色。问题仅限于此活动状态！如果使用css标准样式（使用

.active{color:red}

设置样式）例如，您应该使用“/yourStyles.CSS”导入您的CSS文件。我认为您的问题来自混合材料，因为您导入的是CSS模块，但应用的是CSS类，只有在代码的某个地方导入了CSS文件（如在全局中）时，它才会起作用

      <Link to="/blog/" activeClassName={navbarStyles.active}>
        Blog
      </Link>