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

Posted 2023-03-15

【中文标题】无法使用样式组件的 Nextjs 组件（链接）

【英文标题】：Cannot Nextjs Component (Link) using styled-components

【发布时间】：2022-01-04 00:25:16

【问题描述】：

我正在尝试使用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;
`

谁能告诉我我错过了什么？现在必须做什么？

任何帮助将不胜感激。

【参考方案1】：

next.js Link 不采用任何样式，但您可以设置子元素的样式，例如a，并在使用custom compoment 时将passHref 添加到Link。子项的样式将应用于父项，即Link。但是，您可以像上面所做的那样设置 react-router-dom Link, NavLink 的样式。在 next.js 中你可以这样做

import Link from 'next/link'

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

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