使用styled-components无法为Next.js的Link组件设置样式，求解决方案

云上老周

2026-9-24

问题原因

你遇到的样式不生效问题不是配置错误导致的，和你已经完成的babel插件、_document.js配置无关。
Next.js Pages Router（对应你使用的/pages目录路由模式）中，13版本之前的Link组件本身不渲染任何实体DOM节点，仅负责将导航相关属性传递给内部的子元素。你直接对Link组件使用styled()包裹时，styled-components生成的样式类没有对应的DOM节点承接，因此样式不会生效。

解决方法

方案1：分层嵌套写法（全版本兼容）

沿用你已经验证生效的styled.a方案，将样式化的a标签作为Link的子元素使用即可：

import Link from 'next/link'
import styled from 'styled-components'

const StyledAnchor = styled.a`
    color: red;
`

// 组件内调用
<Link href="/目标路径" passHref>
  <StyledAnchor>跳转文本</StyledAnchor>
</Link>

注：Next.js 12及以上版本可以省略passHref参数，框架会自动将href属性透传给子a标签。

方案2：封装可直接样式化的自定义Link

如果不想每次写两层结构，可以自定义一个Link包裹组件，将样式类透传给内部的a标签：

import Link from 'next/link'
import styled from 'styled-components'

// 自定义Link组件，承接样式类并传递给内部a标签
const StyledLinkWrapper = ({ href, className, children }) => {
  return (
    <Link href={href} passHref>
      <a className={className}>{children}</a>
    </Link>
  )
}

// 直接对自定义组件做样式化即可生效
const StyledLink = styled(StyledLinkWrapper)`
    color: red;
`

// 调用时仅需写一层
<StyledLink href="/目标路径">跳转文本</StyledLink>