无法使用样式化组件设置 Nextjs 组件（链接）的样式

Question

我正在尝试使用Link提供的样式化组件。我已经完成了所有设置，包括在. 但我仍然无法设置链接组件的样式。NextJSStyled-Componentsbabel-plugin-styled-components_document.js/pages

对于设置，我遵循了这篇文章：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不采用任何样式，但您可以设置子级的样式，例如，a并在使用. 子级的样式将应用于父级，即。但是，您可以像上面那样设置react-router-dom 的样式。在 next.js 中你可以这样做passHrefLinkcustom compomentLinkLink, NavLink

import Link from 'next/link'

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

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