From 0a0aadae2ef0f6328df10b422fd032f12398533d Mon Sep 17 00:00:00 2001
From: Divyesh Agrawal <agrawaldivyesh19@gmail.com>
Date: Wed, 1 Oct 2025 09:39:31 +0530
Subject: [PATCH 1/2] feat: adapt semantic close

---
 src/Notice.tsx       |  5 ++++-
 src/interface.ts     |  2 +-
 tests/index.test.tsx | 10 ++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/Notice.tsx b/src/Notice.tsx
index 243e778..33a2054 100644
--- a/src/Notice.tsx
+++ b/src/Notice.tsx
@@ -33,6 +33,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     onNoticeClose,
     times,
     hovering: forcedHovering,
+    classNames,
+    styles,
   } = props;
   const [hovering, setHovering] = React.useState(false);
   const [percent, setPercent] = React.useState(0);
@@ -138,7 +140,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       {/* Close Icon */}
       {closable && (
         <button
-          className={`${noticePrefixCls}-close`}
+          className={clsx(`${noticePrefixCls}-close`, classNames?.close)}
+          style={{ ...styles?.close }}
           onKeyDown={onCloseKeyDown}
           aria-label="Close"
           {...ariaProps}
diff --git a/src/interface.ts b/src/interface.ts
index 1a5727d..6fa7ae1 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -2,7 +2,7 @@ import type React from 'react';
 
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
 
-type NoticeSemanticProps = 'wrapper';
+type NoticeSemanticProps = 'wrapper' | 'close';
 
 export interface NoticeConfig {
   content?: React.ReactNode;
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 05b302b..bd37f6f 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -623,13 +623,18 @@ describe('Notification.Basic', () => {
 
     act(() => {
       instance.open({
+        closable: true,
         styles: {
           wrapper: {
             content: 'little',
           },
+          close: {
+            color: 'red',
+          },
         },
         classNames: {
           wrapper: 'bamboo',
+          close: 'custom-close',
         },
       });
     });
@@ -638,6 +643,11 @@ describe('Notification.Basic', () => {
       content: 'little',
     });
     expect(document.querySelector('.rc-notification-notice-wrapper')).toHaveClass('bamboo');
+
+    expect(document.querySelector('.rc-notification-notice-close')).toHaveClass('custom-close');
+    expect(document.querySelector('.rc-notification-notice-close')).toHaveStyle({
+      color: 'rgb(255, 0, 0)',
+    });
   });
 
   it('should className work', () => {

From b4decb3de631cd95390396656c858f0b284396f7 Mon Sep 17 00:00:00 2001
From: Divyesh Agrawal <agrawaldivyesh19@gmail.com>
Date: Wed, 1 Oct 2025 09:45:26 +0530
Subject: [PATCH 2/2] feat: Update props and test case

---
 src/Notice.tsx       | 2 +-
 tests/index.test.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Notice.tsx b/src/Notice.tsx
index 33a2054..f032747 100644
--- a/src/Notice.tsx
+++ b/src/Notice.tsx
@@ -141,7 +141,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       {closable && (
         <button
           className={clsx(`${noticePrefixCls}-close`, classNames?.close)}
-          style={{ ...styles?.close }}
+          style={styles?.close}
           onKeyDown={onCloseKeyDown}
           aria-label="Close"
           {...ariaProps}
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index bd37f6f..ac2a048 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -644,8 +644,9 @@ describe('Notification.Basic', () => {
     });
     expect(document.querySelector('.rc-notification-notice-wrapper')).toHaveClass('bamboo');
 
-    expect(document.querySelector('.rc-notification-notice-close')).toHaveClass('custom-close');
-    expect(document.querySelector('.rc-notification-notice-close')).toHaveStyle({
+    const closeButton = document.querySelector('.rc-notification-notice-close');
+    expect(closeButton).toHaveClass('custom-close');
+    expect(closeButton).toHaveStyle({
       color: 'rgb(255, 0, 0)',
     });
   });