企业官网建设流程全解析

• 前端
• UI组件

rsuite 的 Link 组件提供了underline属性，用于精细控制链接文本的下划线显隐策略，共支持always、hover、not-hover、never四种取值。本文以官方文档中的 underline 示例 为主体，深入源码解析这四种模式各自的 CSS 实现方式、数据流传递过程与测试验证，帮助你按需为产品中的链接定制下划线交互。

一、underline 属性一览

underline属性决定链接在何种情况下应用text-decoration: underline样式，其默认值为hover，即仅在鼠标悬停时显示下划线。

该属性的完整类型定义位于 Link.tsx：

/** Determines in which cases link should have text-decoration: underline styles, hover by default */ underline?: 'always' | 'hover' | 'not-hover' | 'never';

二、官方示例：一行代码切换四种模式

官方文档在 underline.md 中给出了最直观的演示——通过HStack将四种模式的链接水平排列，间距为 20px：

import { Link, HStack } from 'rsuite'; const App = () => { return ( <HStack spacing={20}> <Link underline="always">Underline always</Link> <Link underline="hover">Underline hover</Link> <Link underline="not-hover">Underline not-hover</Link> <Link underline="never">Underline never</Link> </HStack> ); }; ReactDOM.render(<App />, document.getElementById('root'));

可以看到，使用方式非常简洁：仅需传入underline属性并指定其中一个取值，其余样式细节全部由组件内部处理。这段代码可直接复制到任意 rsuite 项目中运行。

三、源码原理：从属性到 CSS 的数据链路

要理解四种模式为何能生效，需要追踪underline属性从传入到渲染的完整链路，它由三部分协作完成。

1. 组件层：把 underline 映射为 data 属性

在 Link.tsx 中，组件将underline直接写入根元素的data-underline属性：

<SafeAnchor as={as} ref={ref} role="link" className={classes} disabled={disabled} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} >&:where([data-underline='always']) { text-decoration: underline; } &:where([data-underline='hover']) { text-decoration: none; &:hover { text-decoration: underline; } } &:where([data-underline='never']) { text-decoration: none !important; } &:where([data-underline='not-hover']) { text-decoration: underline; &:hover { text-decoration: none; } }

逐条解读：

• always：基础状态直接声明text-decoration: underline，悬停时不作任何覆盖，下划线始终存在；
• hover（默认）：基础状态为none，仅在:hover伪类下恢复下划线，这也是最常见的链接交互习惯；
• never：使用!important强制声明text-decoration: none，即使父级或全局样式施加了下划线也无法覆盖，适合视觉上刻意弱化的纯文本链接；
• not-hover：与hover恰好相反，基础状态显示下划线，悬停时反而隐藏，常用于“默认强调、悬停淡化”的特殊场景。

值得一提的是，选择器外层包裹:where()，其特异性为零，因此不会与页面中其他样式规则产生优先级冲突，方便用户在此基础上自行覆盖。

3. 默认基线样式

在引入underline判断之前，.rs-link的基线样式已声明text-decoration: none（见 styles/index.scss），这保证未设置underline属性的链接默认不带下划线，视觉表现一致且可控。

四、测试验证：四种取值的行为被逐一锁定

仓库中的单元测试 Link.spec.tsx 对四种取值做了完整的回归验证，通过rerender逐一断言渲染结果中的data-underline属性值：

it('Should have correct underline attribute', () => { const { rerender } = render(<Link underline="always">Title</Link>); expect(screen.getByRole('link')).to.have.attr('data-underline', 'always'); rerender(<Link underline="hover">Title</Link>); expect(screen.getByRole('link')).to.have.attr('data-underline', 'hover'); rerender(<Link underline="not-hover">Title</Link>); expect(screen.getByRole('link')).to.have.attr('data-underline', 'not-hover'); rerender(<Link underline="never">Title</Link>); expect(screen.getByRole('link')).to.have.attr('data-underline', 'never'); });

同时，该测试还验证了className会被合并而非覆盖（rs-link与自定义 class 共存，见 Link.spec.tsx），这意味着你在添加自定义样式时不会破坏下划线逻辑。

五、与其他 Link 能力的组合使用

underline只是 Link 组件众多可配置项之一。结合 Link 官方文档 的 Props 表，可以将下划线模式与以下能力自由组合：

例如，一个既需要始终下划线、又需要在新标签页打开的外链可以这样写：

<Link underline="always" external showAnchorIcon> Visit Docs </Link>

若需要在段落文字中嵌入下划线受控的链接，可参考 within-text.md 的做法，将Link与Text组件嵌套使用：

import { Link, Text } from 'rsuite'; const App = () => ( <Text> This is an example paragraph demonstrating how to embed <Link>links</Link> within text. </Text> );

六、实用建议

1. 导航菜单与页脚链接：通常选用默认的hover，悬停出现下划线可提供清晰的交互反馈；
2. 正文强调性链接：若希望链接在未点击时即被识别，可选用always；
3. 纯功能入口（如"了解更多"）：当链接形式感过强时，可用never配合颜色区分，减少视觉噪音；
4. 特殊装饰场景：需要"默认有下划线、悬停消失"的反向交互时，使用not-hover；
5. 与路由库集成：通过as属性可无缝对接 Next.js 等路由组件，详见 routing-library.md 中的用法，下划线模式在该场景下同样生效。

至此，你已完整掌握 rsuite Link 组件underline属性的四种取值、其源码级的实现链路与测试保障，可以按需在任何项目中精准控制链接下划线的显示时机了。

• 前端
• UI组件