Next.js中<Link>组件默认文本装饰线无法移除的问题

问题根源 #

Next.js的<Link>组件最终会渲染成原生<a>标签，浏览器默认会给<a>标签添加下划线样式。当你把整个卡片组件包裹在<Link>里时，卡片内的文本元素会继承<a>标签的text-decoration属性；另外如果你的样式选择器权重不够，或者被全局样式/Next.js默认样式覆盖，直接给卡片组件设置样式就会失效。

针对性解决办法 #

1. 直接给<Link>绑定样式
   给<Link>组件添加自定义类名，直接针对生成的<a>标签设置样式，这是最直接的方式：

   // 组件代码
   <Link href="/target-path" className="card-link">
     <Card />
   </Link>
   

   // SCSS样式
   .card-link {
     text-decoration: none;
     // 同时覆盖hover状态的默认下划线
     &:hover {
       text-decoration: none;
     }
     // 确保卡片内所有子元素继承无下划线样式
     * {
       text-decoration: inherit;
     }
   }
   

2. 调整样式优先级
   打开浏览器开发者工具，查看<a>标签的样式面板，找到正在生效的下划线样式来源（比如全局样式表）。然后用更具体的选择器提升权重，比如：

   .card-wrapper .card-link {
     text-decoration: none;
   }
   

   尽量避免滥用!important，优先通过嵌套选择器、类名组合来提高权重。

3. 理解为什么“给卡片容器所有子元素设置”生效
   当你给.card-container * { text-decoration: none; }时，是强制卡片内所有文本元素（比如<p>、<h3>等）取消下划线，直接覆盖了它们从父级<a>标签继承的样式。而直接给卡片组件设置样式，要么是卡片根元素不是文本元素，要么是样式权重低于<a>标签的默认样式，所以无法生效。

内容的提问来源于stack exchange，提问作者mr.sun