如何在Next.js中为Link标签添加CSS或styled-components样式？

方法一：使用CSS Modules #

Next.js的<Link>组件渲染后，实际可交互的是内部的<a>标签（Pages Router）或自动生成的锚点元素（App Router），直接给Link加className样式不会生效，因为样式没传递到实际交互节点。可以用以下两种方式调整：

1. 把样式应用到Link的子元素 #

修改组件结构，将className加到内部的<div>上：

import Link from "next/link";
import styles from "../Components.module.css";

export default function SubjectBTN({ label, path }) {
  return (
    <Link href={path}>
      <div className={styles.SubjectBTN}>{label}</div>
    </Link>
  );
}

然后在Components.module.css中编写样式：

.SubjectBTN {
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.SubjectBTN:hover {
  background: #e0e0e0;
}

2. 用后代选择器作用到Link内部的a标签（App Router） #

如果是Next.js 13+的App Router，Link支持直接传className，但需要用后代选择器让样式作用到它生成的<a>标签：

.SubjectBTN a {
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.SubjectBTN a:hover {
  background: #e0e0e0;
}

组件代码保持你原来的写法即可。

方法二：使用styled-components #

1. 直接样式化Link组件 #

创建一个样式化的Link组件，直接编写样式：

import Link from "next/link";
import styled from "styled-components";

const StyledLink = styled(Link)`
  display: inline-block;
  padding: 8px 16px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s;

  &:hover {
    background-color: #e0e0e0;
  }
`;

export default function SubjectBTN({ label, path }) {
  return (
    <StyledLink href={path}>
      <div>{label}</div>
    </StyledLink>
  );
}

2. 样式化内部容器 #

如果直接样式化Link不生效，也可以给内部的<div>添加样式：

import Link from "next/link";
import styled from "styled-components";

const ButtonContainer = styled.div`
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;

  &:hover {
    background: #e0e0e0;
  }
`;

export default function SubjectBTN({ label, path }) {
  return (
    <Link href={path}>
      <ButtonContainer>{label}</ButtonContainer>
    </Link>
  );
}

内容的提问来源于stack exchange，提问作者Abed Al Ghani Mosbah Shaaban