title: Use 'active' state from React Router in Styled Components
body: <p>React Router adds an <code>active</code> class to NavLinks when you are on the page that they link to. How can I access this property with Styled Components. I need to styled menu items differently when you are on their page. </p>
  
  <pre><code>const LinkElem = styled(NavLink)`
    font-size: 16px;
    font-weight: 400;
  
    ${props =&gt; console.log(props)};
  
    &amp;:hover {
      color: ${props =&gt; props.theme.colorOrange};
    }
  `;
  
  const Menu = props =&gt; {
    const { me } = props;
    return (
      &lt;MenuElem&gt;
        &lt;li&gt;
          {me ? (
            &lt;LinkElem to="/account"&gt;Account&lt;/LinkElem&gt;
          ) : (
            &lt;LinkElem to="/login"&gt;Log in / sign up&lt;/LinkElem&gt;
          )}
        &lt;/li&gt;
      &lt;/MenuElem&gt;
    );
  };
  </code></pre>