title: hover underline - react router link vs styled-component link
body: <p>I am using two different links:</p>
  
  <p>For this styled-component link, when I hover over it, it gets underlined. I don't want that to happen.</p>
  
  <pre><code>export const StyledLink = styled(Link)`
    href: #;
    text-decoration: none;
    color: black;
  `;
  
  &lt;StyledLink href={'/login'}&gt; SIGN&lt;/StyledLink&gt;
  </code></pre>
  
  <p>Second link is like this:</p>
  
  <pre><code>&lt;Link className="link-buttons" to={'/login'}&gt;
          {' '}
          Contact
        &lt;/Link&gt;
  
    .link-buttons{
      text-decoration: none;
    }
  </code></pre>
  
  <p>The css is same. Then why is the first one acting differently?</p>