title: NextJS React app styled component not rendering correct: Warning: Prop `className` did not match
body: <p>In my NextJS app's <code>_app.tsx</code> I am using <code>import Router from 'next/router'</code> in order to render different nav button styles for my top menu.</p>
  
  <p>When the path is <code>/</code> the rendering works, however when I'm on <code>/about</code> the render does not work and I get the following error. Even though the boolean logic is working correctly.</p>
  
  <p>Error:</p>
  
  <blockquote>
    <p>Warning: Prop <code>className</code> did not match. Server: "nav__NavActive-sc-6btkfp-2 gJVDzS nav__NavLink-sc-6btkfp-1 bvpMWI" Client: "nav__NavLink-sc-6btkfp-1 bvpMWI"</p>
  </blockquote>
  
  <p>In this screenshot below, I'm currently on the <code>/about</code> path and the NavActive style should be applied to the about link, but it's not.</p>
  
  <p><a href="https://i.stack.imgur.com/QKD8T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QKD8T.png" alt="enter image description here"></a></p>
  
  <p>The boolean console.logs on the about page:</p>
  
  <p><a href="https://i.stack.imgur.com/C07Mv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C07Mv.png" alt="enter image description here"></a></p>
  
  <p>However the NavActive style is still stuck on <code>portfolio</code> which is the <code>'/'</code> route.</p>
  
  <p><a href="https://i.stack.imgur.com/kK0Aa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kK0Aa.png" alt="enter image description here"></a></p>
  
  <h2>_app.tsx</h2>
  
  <pre><code>import React from 'react'
  import Router from 'next/router'
  import App, { Container } from 'next/app'
  import withReduxStore from '../lib/withReduxStore'
  import { Provider } from 'react-redux'
  
  import Page from '../components/Page/Page'
  import { Nav, NavLink, NavActive } from '../styles'
  
  interface IProps {
    reduxStore: any;
    location: string;
  }
  
  const pluckRoute = (Router: any) =&gt; Router ? Router.pathname : '/';
  
  class MoonApp extends App&lt;IProps&gt; {
    render() {
      const { Component, reduxStore } = this.props;
  
      const currentRoute = pluckRoute(Router.router);
      console.log('currentRoute', currentRoute);
  
      const NavPortfolio = currentRoute === '/' ? NavActive : NavLink;
      const NavAbout = currentRoute === '/about' ? NavActive : NavLink;
  
      console.log(currentRoute === '/');
      console.log(currentRoute === '/about');
  
      return (
        &lt;Container&gt;
          &lt;Provider store={reduxStore}&gt;
            &lt;Page&gt;
              &lt;Nav&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;NavPortfolio href="/"&gt;Portfolio&lt;/NavPortfolio&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;NavAbout href="/about"&gt;About&lt;/NavAbout&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/Nav&gt;
              &lt;Component /&gt;
            &lt;/Page&gt;
          &lt;/Provider&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  export default withReduxStore(MoonApp);
  </code></pre>
  
  <h2>My nav styles</h2>
  
  <pre><code>import styled from 'styled-components'
  
  export const Nav = styled.div`
    width: 100px;
  
    ul {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 30px 0 0 30px;
    }
  
    li { margin-right: 1.5rem; list-style: none; }
  `
  
  export const NavLink = styled.a`
    color: ${props =&gt; props.theme.apricot};
    border: none;
    &amp;:hover { color: ${props =&gt; props.theme.offWhite}; }
  `
  
  export const NavActive = styled(NavLink)`
    color: ${props =&gt; props.theme.offWhite};
    border-bottom: 2px solid ${props =&gt; props.theme.apricot};
  `
  </code></pre>