css - 在 Gatsby 中使用 ActiveClassName 和 CSS 模块向事件链接添加样式不起作用

Question

我在尝试实现时遇到问题:https://www.gatsbyjs.com/docs/gatsby-link/#add-custom-styles-for-the-currently-active-link使用 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>
  );
}

样式在 navbar.module.css 中(我在其中定义了一个“事件”类):

/* navbar */
nav ul li a {
    color: #FFF;
}
nav ul li a.active {
    color: #000;
}

我的导航栏链接默认颜色是正确的#FFF当我转到相应页面时，我的链接已正确更新为事件类，例如。 :

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

但是 .active 样式永远不会应用于事件链接 :((黑色)

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

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

谢谢你的帮助

Answer 1

Strange thing here, when I extract the '.active' CSS fromnavbar.module.css and put it in my global.css file, things areworking!

很明显，您的样式在 CSS 代码中的某处被覆盖了。检查 CSS Assets 的导入并检查元素以检查当前样式是从哪里获取的(检查检查器中的计算选项卡)。

你的代码是完全有效的，你的 CSS 规则也是如此，尽管混合了 CSS modules and CSS standard styling .您也可以尝试类似的操作:

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