无法使用已设置样式的组件设置Nextjs组件(链接)的样式

Question

我正在尝试使用Styled-Components为NextJS提供的Link组件设置样式。我已经完成了所有的设置，包括babel-plugin-styled-components，在/pages中创建_document.js。但我仍然无法设置链接组件的样式。

关于设置，我遵循了这篇文章：https://medium.com/nerd-for-tech/using-next-js-with-styled-components-easy-dfff3849e4f1

运行良好

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

但这不是

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

有人能告诉我我缺了什么吗？现在该怎么办？

任何帮助都将不胜感激。

Answer 1

next.jsLink不采用任何样式，但当使用custom compoment时，您可以对子级(例如a(进行样式设置，并将passHref添加到Link中。子项的样式将应用于父项，即Link。但是，您可以像上面所做的那样设置react路由器domLink, NavLink的样式。在next.js中，你可以像这样做

import Link from 'next/link'
const CustomLink = styled.a `
color: white;
background: red;
`
<Link href="/" passHref>
<CustomLink>Home</CustomLink>
</Link>