chore: adjust classNames and styles

src/Image.tsx

@@ -14,6 +14,7 @@ import useRegisterImage from './hooks/useRegisterImage';
 import useStatus from './hooks/useStatus';
 import type { ImageElementProps } from './interface';
 import { getOffset } from './util';
+import classNames from 'classnames';
 
 export interface ImgInfo {
   url: string;
@@ -35,8 +36,8 @@ export interface ImagePreviewType
   getContainer?: GetContainer | false;
   mask?: React.ReactNode;
   maskClassName?: string;
-  classNames?: Partial<Record<SemanticName, string>>;
-  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<PreviewSemanticName, string>>;
+  styles?: Partial<Record<PreviewSemanticName, React.CSSProperties>>;
   icons?: PreviewProps['icons'];
   scaleStep?: number;
   movable?: boolean;
@@ -52,6 +53,7 @@ export interface ImagePreviewType
 }
 
 export type SemanticName = 'root' | 'actions' | 'mask';
+export type PreviewSemanticName = 'root' | 'actions' | 'mask';
 
 export interface ImageProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {
@@ -64,6 +66,8 @@ export interface ImageProps
   placeholder?: React.ReactNode;
   fallback?: string;
   rootClassName?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   preview?: boolean | ImagePreviewType;
   /**
    * @deprecated since version 3.2.1
@@ -96,6 +100,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     wrapperClassName,
     wrapperStyle,
     rootClassName,
+    classNames: imageClassNames,
+    styles: imageStyles,
     ...otherProps
   } = props;
 
@@ -107,8 +113,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     getContainer: getPreviewContainer = undefined,
     mask: previewMask,
     maskClassName,
-    classNames: imageClassNames,
-    styles,
+    classNames: previewClassNames,
+    styles: previewStyles,
     movable,
     icons,
     scaleStep,
@@ -190,11 +196,12 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     <>
       <div
         {...otherProps}
-        className={wrapperClass}
+        className={classNames(wrapperClass, imageClassNames?.root)}
         onClick={canPreview ? onPreview : onClick}
         style={{
           width,
           height,
+          ...imageStyles?.root,
           ...wrapperStyle,
         }}
       >
@@ -230,7 +237,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
             className={cn(`${prefixCls}-mask`, maskClassName, imageClassNames?.mask)}
             style={{
               display: style?.display === 'none' ? 'none' : undefined,
-              ...styles?.mask,
+              ...imageStyles?.mask,
             }}
           >
             {previewMask}
@@ -254,12 +261,12 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           scaleStep={scaleStep}
           minScale={minScale}
           maxScale={maxScale}
-          rootClassName={rootClassName}
+          rootClassName={classNames(rootClassName, imageClassNames?.root)}
           imageRender={imageRender}
           imgCommonProps={imgCommonProps}
           toolbarRender={toolbarRender}
-          classNames={imageClassNames}
-          styles={styles}
+          classNames={previewClassNames}
+          styles={{ root: imageStyles?.root, ...previewStyles }}
           {...dialogProps}
         />
       )}

src/Operations.tsx

@@ -4,7 +4,7 @@ import CSSMotion from '@rc-component/motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import * as React from 'react';
 import { useContext } from 'react';
-import type { ImgInfo, SemanticName } from './Image';
+import type { ImgInfo, PreviewSemanticName } from './Image';
 import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
@@ -62,8 +62,8 @@ interface OperationsProps
   ) => React.ReactNode;
   zIndex?: number;
   image?: ImgInfo;
-  classNames?: Partial<Record<SemanticName, string>>;
-  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<PreviewSemanticName, string>>;
+  styles?: Partial<Record<PreviewSemanticName, React.CSSProperties>>;
 }
 
 const Operations: React.FC<OperationsProps> = props => {
@@ -220,6 +220,7 @@ const Operations: React.FC<OperationsProps> = props => {
           <div
             className={classnames(`${prefixCls}-operations-wrapper`, className, rootClassName)}
             style={{
+              ...styles?.root,
               ...style,
               zIndex,
             }}

src/Preview.tsx

@@ -3,7 +3,7 @@ import Dialog from '@rc-component/dialog';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import classnames from 'classnames';
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import type { ImgInfo, SemanticName } from './Image';
+import type { ImgInfo, PreviewSemanticName } from './Image';
 import Operations from './Operations';
 import { PreviewGroupContext } from './context';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
@@ -81,8 +81,8 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose' | 'styles
     info: ToolbarRenderInfoType,
   ) => React.ReactNode;
   onChange?: (current, prev) => void;
-  classNames?: Partial<Record<SemanticName, string>>;
-  styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+  classNames?: Partial<Record<PreviewSemanticName, string>>;
+  styles?: Partial<Record<PreviewSemanticName, React.CSSProperties>> & {
     /** Temporarily used in PurePanel, not used externally by antd */
     wrapper?: React.CSSProperties;
   };
@@ -311,8 +311,8 @@ const Preview: React.FC<PreviewProps> = props => {
           mask: styles?.mask,
           wrapper: styles?.wrapper,
         }}
-        style={styles?.root}
-        rootClassName={classnames(rootClassName, imageClassNames?.root)}
+        rootStyle={styles?.root}
+        rootClassName={rootClassName}
         getContainer={getContainer}
         {...restProps}
         afterClose={onAfterClose}

tests/preview.test.tsx

@@ -1034,12 +1034,10 @@ describe('Preview', () => {
     const customClassnames = {
       mask: 'custom-mask',
       actions: 'custom-actions',
-      root: 'custom-root',
     };
     const customStyles = {
       mask: { color: 'red' },
       actions: { backgroundColor: 'blue' },
-      root: { border: '1px solid green' },
     };
     const { baseElement } = render(
       <Image
@@ -1053,13 +1051,11 @@ describe('Preview', () => {
         }}
       />,
     );
-    const mask = document.querySelector('.rc-image-mask');
+    const mask = document.querySelector('.rc-image-preview-mask');
     const actions = baseElement.querySelector('.rc-image-preview-operations');
     expect(mask).toHaveClass(customClassnames.mask);
     expect(mask).toHaveStyle(customStyles.mask);
     expect(actions).toHaveClass(customClassnames.actions);
     expect(actions).toHaveStyle(customStyles.actions);
-    expect(baseElement.querySelector('.rc-image-preview-root')).toHaveClass(customClassnames.root);
-    expect(baseElement.querySelector('.rc-image-preview')).toHaveStyle(customStyles.root);
   });
 });