title: react scroll with styled component is not working
body: <p>I am using react with styled component and react-scroll to create a simple menu.
  I want to make a one-page application. Everything is fine but when I scroll to a specific section of my page, it should show me the tab has been activated on my Nav. but it doesnt work at all.</p>
  <pre><code>&lt;Nav&gt;
          &lt;NavBarCotainer&gt;
            &lt;NavMenu&gt;
              &lt;NavItem&gt;
                &lt;NavLink
                  to=&quot;about&quot;
                &gt;
                  About Us
                &lt;/NavLink&gt;
              &lt;/NavItem&gt;
            &lt;/NavMenu&gt;
          &lt;/NavBarCotainer&gt;
        &lt;/Nav&gt;
  </code></pre>
  <p>and in my styled component, I have</p>
  <pre><code>export const NavLink = styled(LinkS)`
    color: blue;
    &amp;:active {
      color: red;
    }
  `;
  </code></pre>
  <p>this work when I click on any of the links it quickly changes to red but becomes blue again and when I visit that section it wont turn red at all.</p>
  <p>if I change that to:</p>
  <pre><code>  &amp;.active {
      color: red;
    }
  
  import { Link as LinkS } from &quot;react-scroll&quot;;
  </code></pre>
  <p>it wont do anything at all, when I visit a section of page it will be always blue.</p>
  <p>How can I fix this issue, what I am doing wrong?</p>