Cannot Style Nextjs Component (Link) using styled-components

Question

I am trying to styled Link Component provided by NextJS using Styled-Components. I have done all the setup including babel-plugin-styled-components, creating _document.js in /pages. But still I am unable to Style the link component.

For setup, I have followed this article: https://medium.com/nerd-for-tech/using-next-js-with-styled-components-easy-dfff3849e4f1

This is working fine

const StyledComponent = Styled.a`
    color: red;
`

But this does not

const StyledComponent = Styled(Link)`
    color: red;
`

Can anyone pls tell me what am I missing? What has to be done now?

Any help will be appreciated.

Answer 1

The next.js Link doesn't take any styles but you can style the children eg a and add passHref to the Link when using a custom compoment. The styles of the child will be applied to the parent i.e Link. However, you can style the react-router-dom Link, NavLink like what you did above. In next.js you can do it like this

import Link from 'next/link'

const CustomLink = styled.a `
    color: white;
    background: red;
`

<Link href="/" passHref>
    <CustomLink>Home</CustomLink>
</Link>