From 82898fd9c30119decf04e07252ac4f1c1ba087a1 Mon Sep 17 00:00:00 2001
From: arktomson <2372929539@qq.com>
Date: Thu, 25 Sep 2025 22:56:51 +0800
Subject: [PATCH 1/3] feat: adapt semantic close

---
 src/Preview/CloseBtn.tsx | 11 +++++++++--
 src/Preview/index.tsx    |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Preview/CloseBtn.tsx b/src/Preview/CloseBtn.tsx
index aacd6cc..42c5849 100644
--- a/src/Preview/CloseBtn.tsx
+++ b/src/Preview/CloseBtn.tsx
@@ -1,16 +1,23 @@
+import classnames from 'classnames';
 import * as React from 'react';
 
 export interface CloseBtnProps {
   prefixCls: string;
   icon?: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export default function CloseBtn(props: CloseBtnProps) {
-  const { prefixCls, icon, onClick } = props;
+  const { prefixCls, icon, onClick, className, style } = props;
 
   return (
-    <button className={`${prefixCls}-close`} onClick={onClick}>
+    <button
+      className={classnames(`${prefixCls}-close`, className)}
+      style={style}
+      onClick={onClick}
+    >
       {icon}
     </button>
   );
diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index 02d2252..90efc1b 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -19,7 +19,7 @@ import PrevNext from './PrevNext';
 
 // Note: if you want to add `action`,
 // pls contact @zombieJ or @thinkasany first.
-export type PreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
+export type PreviewSemanticName = 'root' | 'mask' | 'body' | 'close' | FooterSemanticName;
 
 export interface OperationIcons {
   rotateLeft?: React.ReactNode;
@@ -440,6 +440,8 @@ const Preview: React.FC<PreviewProps> = props => {
                   prefixCls={prefixCls}
                   icon={closeIcon === true ? icons.close : closeIcon || icons.close}
                   onClick={onClose}
+                  className={classNames.close}
+                  style={styles.close}
                 />
               )}
 

From 7695726ee91ba1c7541ae8ec6a2059a5294039d0 Mon Sep 17 00:00:00 2001
From: arktomson <2372929539@qq.com>
Date: Sat, 27 Sep 2025 11:45:59 +0800
Subject: [PATCH 2/3] feat: update unit test

---
 tests/preview.test.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx
index 7307608..39f8c5a 100644
--- a/tests/preview.test.tsx
+++ b/tests/preview.test.tsx
@@ -1079,6 +1079,7 @@ describe('Preview', () => {
         mask: 'custom-mask',
         actions: 'custom-actions',
         root: 'custom-root',
+        close: 'custom-close',
       },
     };
     const customStyles = {
@@ -1087,6 +1088,7 @@ describe('Preview', () => {
         mask: { color: 'red' },
         actions: { backgroundColor: 'blue' },
         root: { border: '1px solid green' },
+        close: { color: 'purple' },
       },
     };
     const { baseElement } = render(
@@ -1105,12 +1107,15 @@ describe('Preview', () => {
     const cover = document.querySelector('.rc-image-cover');
     const mask = document.querySelector('.rc-image-preview-mask');
     const actions = baseElement.querySelector('.rc-image-preview-actions');
+    const close = baseElement.querySelector('.rc-image-preview-close');
     expect(cover).toHaveClass(customClassnames.cover);
     expect(cover).toHaveStyle(customStyles.cover);
     expect(mask).toHaveClass(customClassnames.popup.mask);
     expect(mask).toHaveStyle(customStyles.popup.mask);
     expect(actions).toHaveClass(customClassnames.popup.actions);
     expect(actions).toHaveStyle(customStyles.popup.actions);
+    expect(close).toHaveClass(customClassnames.popup.close);
+    expect(close).toHaveStyle(customStyles.popup.close);
     expect(baseElement.querySelector('.rc-image-preview')).toHaveClass(customClassnames.popup.root);
     expect(baseElement.querySelector('.rc-image-preview')).toHaveStyle(customStyles.popup.root);
   });

From aa53013d294b62df0880a469c88bcf0635bcb1d7 Mon Sep 17 00:00:00 2001
From: arktomson <2372929539@qq.com>
Date: Thu, 9 Oct 2025 11:05:44 +0800
Subject: [PATCH 3/3] feat: adapt clsx

---
 src/Preview/CloseBtn.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Preview/CloseBtn.tsx b/src/Preview/CloseBtn.tsx
index 42c5849..00bacda 100644
--- a/src/Preview/CloseBtn.tsx
+++ b/src/Preview/CloseBtn.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 
 export interface CloseBtnProps {
@@ -14,7 +14,7 @@ export default function CloseBtn(props: CloseBtnProps) {
 
   return (
     <button
-      className={classnames(`${prefixCls}-close`, className)}
+      className={clsx(`${prefixCls}-close`, className)}
       style={style}
       onClick={onClick}
     >