From 166e9c88e5dcd0739a8d2d8617be8a70f5b66853 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?=
 <66234749+QDyanbing@users.noreply.github.com>
Date: Wed, 28 Jan 2026 16:01:51 +0800
Subject: [PATCH] fix(Typography): lower link selector specificity (#56759)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(Typography): lower link selector specificity and add danger debug demo

* fix(Typography): scope link styles and raise type color priority

* chore: update snap

* chore: update snap

* fix(Typography): scope link styles and ensure type colors win

---------

Co-authored-by: 遇见同学 <1875694521@qq.com>
---
 .../__snapshots__/demo-semantic.test.tsx.snap |  2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  2 +-
 .../__snapshots__/demo.test.tsx.snap          |  2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  2 +-
 .../__snapshots__/demo.test.tsx.snap          |  2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  6 +-
 .../__snapshots__/demo.test.tsx.snap          |  6 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 20 +++---
 .../__tests__/__snapshots__/demo.test.ts.snap | 20 +++---
 components/typography/Base/index.tsx          |  1 +
 .../__snapshots__/demo-extend.test.ts.snap    | 67 +++++++++++++++----
 .../__snapshots__/demo.test.tsx.snap          | 65 ++++++++++++++----
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 .../typography/demo/link-danger-debug.md      |  7 ++
 .../typography/demo/link-danger-debug.tsx     | 22 ++++++
 components/typography/index.en-US.md          |  1 +
 components/typography/index.zh-CN.md          |  1 +
 components/typography/style/index.ts          | 12 ++--
 components/typography/style/mixins.ts         |  9 ++-
 19 files changed, 180 insertions(+), 69 deletions(-)
 create mode 100644 components/typography/demo/link-danger-debug.md
 create mode 100644 components/typography/demo/link-danger-debug.tsx

diff --git a/components/drawer/__tests__/__snapshots__/demo-semantic.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-semantic.test.tsx.snap
index e302653b92..1a3c52b1fa 100644
--- a/components/drawer/__tests__/__snapshots__/demo-semantic.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-semantic.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`renders components/drawer/demo/_semantic.tsx correctly 1`] = `
               class="ant-drawer-footer semantic-mark-footer"
             >
               <a
-                class="ant-typography css-var-test-id"
+                class="ant-typography ant-typography-link css-var-test-id"
               >
                 Footer
               </a>
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index ef16273fe8..5db3730ab8 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -7118,7 +7118,7 @@ exports[`renders components/dropdown/demo/render-panel.tsx extend context correc
 exports[`renders components/dropdown/demo/selectable.tsx extend context correctly 1`] = `
 Array [
   <a
-    class="ant-typography ant-dropdown-trigger css-var-test-id"
+    class="ant-typography ant-typography-link ant-dropdown-trigger css-var-test-id"
   >
     <div
       class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap b/components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap
index e181768f1b..d7281c190d 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1262,7 +1262,7 @@ exports[`renders components/dropdown/demo/render-panel.tsx correctly 1`] = `
 
 exports[`renders components/dropdown/demo/selectable.tsx correctly 1`] = `
 <a
-  class="ant-typography ant-dropdown-trigger css-var-test-id"
+  class="ant-typography ant-typography-link ant-dropdown-trigger css-var-test-id"
 >
   <div
     class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index 14bc356ed9..67ff5cdd2a 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1052,7 +1052,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
           class="ant-typography css-var-test-id"
         >
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="https://github.com/ant-design/ant-design/pull/44318"
           >
             Feature #44318
diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
index 8bd0437e88..5ea7882f68 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1014,7 +1014,7 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
           class="ant-typography css-var-test-id"
         >
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="https://github.com/ant-design/ant-design/pull/44318"
           >
             Feature #44318
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index c81c4c9e72..8ce27759f8 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -16413,7 +16413,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <a
-      class="ant-typography css-var-test-id"
+      class="ant-typography ant-typography-link css-var-test-id"
     >
       Link
     </a>
@@ -16430,7 +16430,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <a
-      class="ant-typography css-var-test-id"
+      class="ant-typography ant-typography-link css-var-test-id"
     >
       Link
     </a>
@@ -16447,7 +16447,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <a
-      class="ant-typography css-var-test-id"
+      class="ant-typography ant-typography-link css-var-test-id"
     >
       Link
     </a>
diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
index 229b3017e6..d24ec18306 100644
--- a/components/space/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
@@ -4275,7 +4275,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <a
-      class="ant-typography css-var-test-id"
+      class="ant-typography ant-typography-link css-var-test-id"
     >
       Link
     </a>
@@ -4292,7 +4292,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <a
-      class="ant-typography css-var-test-id"
+      class="ant-typography ant-typography-link css-var-test-id"
     >
       Link
     </a>
@@ -4309,7 +4309,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <a
-      class="ant-typography css-var-test-id"
+      class="ant-typography ant-typography-link css-var-test-id"
     >
       Link
     </a>
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 99be932e89..63a176d9b1 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -8550,7 +8550,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8579,7 +8579,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8608,7 +8608,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8637,7 +8637,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8666,7 +8666,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8695,7 +8695,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8724,7 +8724,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8753,7 +8753,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8782,7 +8782,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -8811,7 +8811,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index e470a5d518..e110ba3ac8 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -7504,7 +7504,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7533,7 +7533,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7562,7 +7562,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7591,7 +7591,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7620,7 +7620,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7649,7 +7649,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7678,7 +7678,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7707,7 +7707,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7736,7 +7736,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
@@ -7765,7 +7765,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                     class="ant-table-cell"
                   >
                     <a
-                      class="ant-typography css-var-test-id"
+                      class="ant-typography ant-typography-link css-var-test-id"
                     >
                       Edit
                     </a>
diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index 5064592b5b..aa888bbd74 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -440,6 +440,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
                 [`${prefixCls}-ellipsis`]: enableEllipsis,
                 [`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
                 [`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
+                [`${prefixCls}-link`]: component === 'a',
               },
               className,
             )}
diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
index f37989880d..cbb39f6be2 100644
--- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -59,7 +59,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
     <ul>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/spec/proximity"
         >
           Principles
@@ -67,7 +67,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
       </li>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/spec/overview"
         >
           Patterns
@@ -75,7 +75,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
       </li>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/resources"
         >
           Resource Download
@@ -163,7 +163,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
     <ul>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/spec/proximity-cn"
         >
           设计原则
@@ -171,7 +171,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
       </li>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/spec/overview-cn"
         >
           设计模式
@@ -179,7 +179,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
       </li>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/resources-cn"
         >
           设计资源
@@ -272,7 +272,7 @@ Array [
       <ul>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/spec/proximity"
           >
             Principles
@@ -280,7 +280,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/spec/overview"
           >
             Patterns
@@ -288,7 +288,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/resources"
           >
             Resource Download
@@ -371,7 +371,7 @@ Array [
       <ul>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/spec/proximity-cn"
           >
             设计原则
@@ -379,7 +379,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/spec/overview-cn"
           >
             设计模式
@@ -387,7 +387,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/resources-cn"
           >
             设计资源
@@ -2233,6 +2233,47 @@ exports[`renders components/typography/demo/ellipsis-middle.tsx extend context c
 
 exports[`renders components/typography/demo/ellipsis-middle.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/typography/demo/link-danger-debug.tsx extend context correctly 1`] = `
+<article
+  class="ant-typography css-var-test-id"
+>
+  <span
+    class="ant-typography css-var-test-id"
+  >
+    Typography.Link 的 type="danger" 颜色应为 error 文本色。
+  </span>
+  <br />
+  <a
+    class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
+    href="https://ant.design"
+  >
+    Danger Link
+  </a>
+  <div
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-rail"
+    role="separator"
+  />
+  <span
+    class="ant-typography css-var-test-id"
+  >
+    Button 以 a 标签渲染时，不应被 Typography 链接样式影响。
+  </span>
+  <br />
+  <a
+    aria-disabled="false"
+    class="ant-btn css-var-test-id ant-btn-link ant-btn-color-link ant-btn-variant-link"
+    href="https://ant.design"
+    tabindex="0"
+  >
+    <span>
+      Button Link
+    </span>
+  </a>
+</article>
+`;
+
+exports[`renders components/typography/demo/link-danger-debug.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/typography/demo/paragraph-debug.tsx extend context correctly 1`] = `
 Array [
   <h1
@@ -2635,7 +2676,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <a
-      class="ant-typography css-var-test-id"
+      class="ant-typography ant-typography-link css-var-test-id"
       href="https://ant.design"
       rel="noopener noreferrer"
       target="_blank"
diff --git a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
index abb8b1ca68..2819207e9b 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
     <ul>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/spec/proximity"
         >
           Principles
@@ -68,7 +68,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
       </li>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/spec/overview"
         >
           Patterns
@@ -76,7 +76,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
       </li>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/resources"
         >
           Resource Download
@@ -164,7 +164,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
     <ul>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/spec/proximity-cn"
         >
           设计原则
@@ -172,7 +172,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
       </li>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/spec/overview-cn"
         >
           设计模式
@@ -180,7 +180,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
       </li>
       <li>
         <a
-          class="ant-typography css-var-test-id"
+          class="ant-typography ant-typography-link css-var-test-id"
           href="/docs/resources-cn"
         >
           设计资源
@@ -272,7 +272,7 @@ Array [
       <ul>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/spec/proximity"
           >
             Principles
@@ -280,7 +280,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/spec/overview"
           >
             Patterns
@@ -288,7 +288,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/resources"
           >
             Resource Download
@@ -371,7 +371,7 @@ Array [
       <ul>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/spec/proximity-cn"
           >
             设计原则
@@ -379,7 +379,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/spec/overview-cn"
           >
             设计模式
@@ -387,7 +387,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
             href="/docs/resources-cn"
           >
             设计资源
@@ -1586,6 +1586,45 @@ exports[`renders components/typography/demo/ellipsis-middle.tsx correctly 1`] =
 </span>
 `;
 
+exports[`renders components/typography/demo/link-danger-debug.tsx correctly 1`] = `
+<article
+  class="ant-typography css-var-test-id"
+>
+  <span
+    class="ant-typography css-var-test-id"
+  >
+    Typography.Link 的 type="danger" 颜色应为 error 文本色。
+  </span>
+  <br />
+  <a
+    class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
+    href="https://ant.design"
+  >
+    Danger Link
+  </a>
+  <div
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-rail"
+    role="separator"
+  />
+  <span
+    class="ant-typography css-var-test-id"
+  >
+    Button 以 a 标签渲染时，不应被 Typography 链接样式影响。
+  </span>
+  <br />
+  <a
+    aria-disabled="false"
+    class="ant-btn css-var-test-id ant-btn-link ant-btn-color-link ant-btn-variant-link"
+    href="https://ant.design"
+    tabindex="0"
+  >
+    <span>
+      Button Link
+    </span>
+  </a>
+</article>
+`;
+
 exports[`renders components/typography/demo/paragraph-debug.tsx correctly 1`] = `
 Array [
   <h1
@@ -1964,7 +2003,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <a
-      class="ant-typography css-var-test-id"
+      class="ant-typography ant-typography-link css-var-test-id"
       href="https://ant.design"
       rel="noopener noreferrer"
       target="_blank"
diff --git a/components/typography/__tests__/__snapshots__/index.test.tsx.snap b/components/typography/__tests__/__snapshots__/index.test.tsx.snap
index abb50b804f..cdc45a9d34 100644
--- a/components/typography/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/typography/__tests__/__snapshots__/index.test.tsx.snap
@@ -20,6 +20,6 @@ exports[`Typography rtl render component should be rendered correctly in RTL dir
 
 exports[`Typography rtl render component should be rendered correctly in RTL direction 4`] = `
 <a
-  class="ant-typography ant-typography-rtl css-var-root"
+  class="ant-typography ant-typography-rtl ant-typography-link css-var-root"
 />
 `;
diff --git a/components/typography/demo/link-danger-debug.md b/components/typography/demo/link-danger-debug.md
new file mode 100644
index 0000000000..6f7afa97fe
--- /dev/null
+++ b/components/typography/demo/link-danger-debug.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Typography.Link 的 danger 颜色与 Button Link 的样式隔离。
+
+## en-US
+
+Typography.Link danger color and isolation from Button link styles.
diff --git a/components/typography/demo/link-danger-debug.tsx b/components/typography/demo/link-danger-debug.tsx
new file mode 100644
index 0000000000..91c36d0208
--- /dev/null
+++ b/components/typography/demo/link-danger-debug.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Divider, Typography } from 'antd';
+
+const { Text, Link } = Typography;
+
+const App: React.FC = () => (
+  <Typography>
+    <Text>Typography.Link 的 type="danger" 颜色应为 error 文本色。</Text>
+    <br />
+    <Link href="https://ant.design" type="danger">
+      Danger Link
+    </Link>
+    <Divider />
+    <Text>Button 以 a 标签渲染时，不应被 Typography 链接样式影响。</Text>
+    <br />
+    <Button type="link" href="https://ant.design">
+      Button Link
+    </Button>
+  </Typography>
+);
+
+export default App;
diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md
index 6fb5d375e6..fa42b7c443 100644
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@@ -27,6 +27,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 <code src="./demo/ellipsis-debug.tsx" debug>Ellipsis Debug</code>
 <code src="./demo/suffix.tsx">suffix</code>
 <code src="./demo/componentToken-debug.tsx" debug>Component Token</code>
+<code src="./demo/link-danger-debug.tsx" debug>Link danger Debug</code>
 
 ## API
 
diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md
index dd803bb251..48b2162965 100644
--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@@ -28,6 +28,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 <code src="./demo/ellipsis-debug.tsx" debug>省略号 Debug</code>
 <code src="./demo/suffix.tsx">后缀</code>
 <code src="./demo/componentToken-debug.tsx" debug>组件 Token</code>
+<code src="./demo/link-danger-debug.tsx" debug>Link danger Debug</code>
 
 ## API
 
diff --git a/components/typography/style/index.ts b/components/typography/style/index.ts
index 3223436aa1..81d4234991 100644
--- a/components/typography/style/index.ts
+++ b/components/typography/style/index.ts
@@ -34,24 +34,24 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
       color: token.colorText,
       wordBreak: 'break-word',
       lineHeight: token.lineHeight,
-      [`&${componentCls}-secondary`]: {
+      [`&${componentCls}-secondary, &${componentCls}-link${componentCls}-secondary`]: {
         color: token.colorTextDescription,
       },
 
-      [`&${componentCls}-success`]: {
+      [`&${componentCls}-success, &${componentCls}-link${componentCls}-success`]: {
         color: token.colorSuccessText,
       },
 
-      [`&${componentCls}-warning`]: {
+      [`&${componentCls}-warning, &${componentCls}-link${componentCls}-warning`]: {
         color: token.colorWarningText,
       },
 
-      [`&${componentCls}-danger`]: {
+      [`&${componentCls}-danger, &${componentCls}-link${componentCls}-danger`]: {
         color: token.colorErrorText,
-        'a&:active, a&:focus': {
+        [`&${componentCls}-link:active, &${componentCls}-link:focus`]: {
           color: token.colorErrorTextActive,
         },
-        'a&:hover': {
+        [`&${componentCls}-link:hover`]: {
           color: token.colorErrorTextHover,
         },
       },
diff --git a/components/typography/style/mixins.ts b/components/typography/style/mixins.ts
index 7e146d2bdc..e57cb9743b 100644
--- a/components/typography/style/mixins.ts
+++ b/components/typography/style/mixins.ts
@@ -54,14 +54,13 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
 };
 
 export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => {
-  const { componentCls, antCls } = token;
-  const btnCls = `${antCls}-btn`;
+  const { componentCls } = token;
+  const linkCls = `${componentCls}-link`;
 
   return {
-    // fix issue: https://github.com/ant-design/ant-design/issues/56606
-    // exclude ant-btn to avoid style conflicts with Button component when it renders as <a></a> tag (variant='link' with href)
-    [`a&:not(${btnCls}), a:not(${btnCls})`]: {
+    [`&${linkCls}`]: {
       ...operationUnit(token),
+      userSelect: 'text',
 
       [`&[disabled], &${componentCls}-disabled`]: {
         color: token.colorTextDisabled,