title: Adding style to active link with ActiveClassName and CSS Module in Gatsby is not working
body: <p>I'm facing an issue when I try to implement this:<a href="https://www.gatsbyjs.com/docs/gatsby-link/#add-custom-styles-for-the-currently-active-link" rel="nofollow noreferrer">https://www.gatsbyjs.com/docs/gatsby-link/#add-custom-styles-for-the-currently-active-link</a> using the ActiveClassName option.</p>
  <p>I have created a navbar.js component which contains the links:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link } from &quot;gatsby&quot;;
  
  import navbarStyles from &quot;./navbar.module.css&quot;;
  
  export default function Navbar() {
    return (
      &lt;nav className={navbarStyles.navbar}&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;Link to=&quot;/contact/&quot; activeClassName=&quot;active&quot;&gt;
              Contact
            &lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to=&quot;/blog/&quot; activeClassName=&quot;active&quot;&gt;
              Blog
            &lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    );
  }
  </code></pre>
  <p>and Styles are in a navbar.module.css (where I've defined a 'active' class) :</p>
  <pre><code>/* navbar */
  nav ul li a {
      color: #FFF;
  }
  nav ul li a.active {
      color: #000;
  }
  </code></pre>
  <p>My navbar link default color is correct #FFF
  My link is correctly updated with the active class when I go to the corresponding page, eg. :</p>
  <pre><code>&lt;a aria-current=&quot;page&quot; class=&quot;active&quot; href=&quot;/contact/&quot;&gt;Contact&lt;/a&gt;
  </code></pre>
  <p>But .active style is never applied to the active link :( (Black color)</p>
  <p>Strange thing here, when I extract the '.active' CSS from navbar.module.css and put it in my global.css file, things are working!</p>
  <p>How can I make things work keeping my styles in the CSS modules?</p>
  <p>Thanks for your help</p>