From af94c381be7c7104b4df2de4c0e5ae0b94cd3a04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 17 Mar 2025 19:45:17 +0800
Subject: [PATCH] chore: back of missing preview.rootClassName

---
 src/Image.tsx          |  3 ++-
 src/Preview/index.tsx  |  3 ++-
 tests/preview.test.tsx | 17 ++++++++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/Image.tsx b/src/Image.tsx
index 4a480d3..7727366 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -119,6 +119,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     cover,
     classNames: previewClassNames = {},
     styles: previewStyles = {},
+    rootClassName: previewRootClassName,
     ...restProps
   }: PreviewConfig = preview && typeof preview === 'object' ? preview : {};
 
@@ -262,7 +263,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           imgCommonProps={imgCommonProps}
           classNames={previewClassNames}
           styles={previewStyles}
-          rootClassName={rootClassName}
+          rootClassName={classnames(previewRootClassName, rootClassName)}
           {...restProps}
         />
       )}
diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index dd86ed5..06ba49e 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -68,6 +68,8 @@ export type ToolbarRenderInfoType = {
 
 export interface InternalPreviewConfig {
   // Semantic
+  /** Better to use `classNames.root` instead */
+  rootClassName?: string;
   classNames?: Partial<Record<InternalPreviewSemanticName, string>>;
   styles?: Partial<Record<InternalPreviewSemanticName, React.CSSProperties>>;
 
@@ -108,7 +110,6 @@ export interface InternalPreviewConfig {
 export interface PreviewProps extends InternalPreviewConfig {
   // Misc
   prefixCls: string;
-  rootClassName?: string;
 
   // Origin image Info
   imageInfo?: {
diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx
index 608b28a..aa9b2c8 100644
--- a/tests/preview.test.tsx
+++ b/tests/preview.test.tsx
@@ -643,7 +643,7 @@ describe('Preview', () => {
 
   it('Customize preview props', () => {
     const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
-    const { container } = render(
+    render(
       <Image
         src={src}
         preview={{
@@ -712,6 +712,21 @@ describe('Preview', () => {
     expect(document.querySelectorAll('.custom-className')).toHaveLength(2);
   });
 
+  it('preview.rootClassName should be correct', () => {
+    const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
+    render(
+      <Image
+        src={src}
+        preview={{
+          open: true,
+          rootClassName: 'custom-className',
+        }}
+      />,
+    );
+
+    expect(document.querySelector('.rc-image-preview.custom-className')).toBeTruthy();
+  });
+
   it('if async src set should be correct', () => {
     const src =
       'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ';