From 169ae106714d7484baa47ae36ba84d89460f8c76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E6=B3=BD=E5=9D=A4?= <984757534@qq.com>
Date: Wed, 6 Nov 2024 16:08:56 +0800
Subject: [PATCH] feat(tag): add `content-style` prop

---
 CHANGELOG.en-US.md                     | 10 ++++++++++
 CHANGELOG.zh-CN.md                     | 10 ++++++++++
 src/tag/demos/enUS/index.demo-entry.md |  1 +
 src/tag/demos/zhCN/index.demo-entry.md |  1 +
 src/tag/src/Tag.tsx                    |  8 +++++++-
 src/tag/tests/Tag.spec.ts              | 13 +++++++++++++
 6 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 18ab580def4..f36ed1c2e7f 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+`xxxx-xx-xx`
+
+### Fixes
+
+### Features
+
+- `n-tag` adds `content-style` prop.
+
 ## 2.40.2
 
 `2025-11-26`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index b5516d55484..c60dcb6d2ae 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+`xxxx-xx-xx`
+
+### Fixes
+
+### Features
+
+- `n-tag` 新增 `content-style` 属性
+
 ## 2.40.2
 
 `2025-11-26`
diff --git a/src/tag/demos/enUS/index.demo-entry.md b/src/tag/demos/enUS/index.demo-entry.md
index c83d654ed33..b18556ebf64 100644
--- a/src/tag/demos/enUS/index.demo-entry.md
+++ b/src/tag/demos/enUS/index.demo-entry.md
@@ -28,6 +28,7 @@ icon.vue
 | checked | `boolean` | `false` | Whether the tag is checked. Note: used with `checkable`. |  |
 | closable | `boolean` | `false` | Whether the tag shows a close button. |  |
 | color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | Color of the tag. Note: this will override the type property's color. |  |
+| content-style | `string \| Object` | `undefined` | Content style of the tag. | NEXT-VERSION |
 | disabled | `boolean` | `false` | Whether the tag is disabled. |  |
 | round | `boolean` | `false` | Whether the tag has rounded corners. |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |  |
diff --git a/src/tag/demos/zhCN/index.demo-entry.md b/src/tag/demos/zhCN/index.demo-entry.md
index ffbbcbc0e08..fd994226176 100644
--- a/src/tag/demos/zhCN/index.demo-entry.md
+++ b/src/tag/demos/zhCN/index.demo-entry.md
@@ -29,6 +29,7 @@ rtl-debug.vue
 | checked | `boolean` | `false` | 是否被选中，配合 checkable 一起使用 |  |
 | closable | `boolean` | `false` | 是否可关闭 |  |
 | color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | 标签颜色，设置该项后 `type` 无效 |  |
+| content-style | `string \| Object` | `undefined` | tag 内容的样式 | NEXT_VERSION |
 | disabled | `boolean` | `false` | 是否禁用 |  |
 | round | `boolean` | `false` | 是否圆角 |  |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |  |
diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx
index 6425c7dbf5d..96b0618bca6 100644
--- a/src/tag/src/Tag.tsx
+++ b/src/tag/src/Tag.tsx
@@ -45,6 +45,7 @@ export const tagProps = {
   },
   checked: Boolean,
   checkable: Boolean,
+  contentStyle: [Object, String] as PropType<CSSProperties | string>,
   strong: Boolean,
   triggerClickOnClose: Boolean,
   onClose: [Array, Function] as PropType<MaybeArray<(e: MouseEvent) => void>>,
@@ -259,6 +260,7 @@ export default defineComponent({
       rtlEnabled,
       closable,
       color: { borderColor } = {},
+      contentStyle,
       round,
       onRender,
       $slots
@@ -299,7 +301,11 @@ export default defineComponent({
         onMouseleave={this.onMouseleave}
       >
         {iconNode || avatarNode}
-        <span class={`${mergedClsPrefix}-tag__content`} ref="contentRef">
+        <span
+          class={`${mergedClsPrefix}-tag__content`}
+          ref="contentRef"
+          style={contentStyle}
+        >
           {this.$slots.default?.()}
         </span>
         {!this.checkable && closable ? (
diff --git a/src/tag/tests/Tag.spec.ts b/src/tag/tests/Tag.spec.ts
index a02fb03cadd..8d577a96443 100644
--- a/src/tag/tests/Tag.spec.ts
+++ b/src/tag/tests/Tag.spec.ts
@@ -166,4 +166,17 @@ describe('n-tag', () => {
       '--n-merged-size: var(--n-avatar-size-override, 34px);'
     )
   })
+
+  it('should work with `content-style` prop', () => {
+    const wrapper = mount(NTag, {
+      props: {
+        contentStyle: {
+          color: 'rgb(204, 204, 204)'
+        }
+      }
+    })
+    expect(wrapper.find('.n-tag__content').attributes('style')).toContain(
+      'color: rgb(204, 204, 204);'
+    )
+  })
 })