feat: support classnames and styles

src/Image.tsx

@@ -49,6 +49,8 @@ export interface ImagePreviewType
   ) => React.ReactNode;
 }
 
+export type SemanticName = 'actions' | 'mask';
+
 export interface ImageProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {
   // Original
@@ -67,6 +69,8 @@ export interface ImageProps
   onPreviewClose?: (value: boolean, prevValue: boolean) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 interface CompoundedComponent<P> extends React.FC<P> {
@@ -92,7 +96,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     wrapperClassName,
     wrapperStyle,
     rootClassName,
-
+    classNames: imageClassNames,
+    styles,
     ...otherProps
   } = props;
 
@@ -222,9 +227,10 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
         {/* Preview Click Mask */}
         {previewMask && canPreview && (
           <div
-            className={cn(`${prefixCls}-mask`, maskClassName)}
+            className={cn(`${prefixCls}-mask`, maskClassName, imageClassNames?.mask)}
             style={{
               display: style?.display === 'none' ? 'none' : undefined,
+              ...styles?.mask,
             }}
           >
             {previewMask}
@@ -252,6 +258,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           imageRender={imageRender}
           imgCommonProps={imgCommonProps}
           toolbarRender={toolbarRender}
+          classNames={imageClassNames}
+          styles={styles}
           {...dialogProps}
         />
       )}

src/Operations.tsx

@@ -4,10 +4,11 @@ import CSSMotion from 'rc-motion';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import { useContext } from 'react';
-import type { ImgInfo } from './Image';
+import type { ImgInfo, SemanticName } from './Image';
 import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
+import classNames from 'classnames';
 
 type OperationType =
   | 'prev'
@@ -61,6 +62,8 @@ interface OperationsProps
   ) => React.ReactNode;
   zIndex?: number;
   image?: ImgInfo;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 const Operations: React.FC<OperationsProps> = props => {
@@ -93,6 +96,8 @@ const Operations: React.FC<OperationsProps> = props => {
     toolbarRender,
     zIndex,
     image,
+    classNames: imageClassNames,
+    styles,
   } = props;
   const groupContext = useContext(PreviewGroupContext);
   const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
@@ -195,7 +200,10 @@ const Operations: React.FC<OperationsProps> = props => {
   });
 
   const toolbarNode = (
-    <div className={`${prefixCls}-operations`}>
+    <div
+      className={classNames(`${prefixCls}-operations`, imageClassNames?.actions)}
+      style={styles?.actions}
+    >
       {flipYNode}
       {flipXNode}
       {rotateLeftNode}

src/Preview.tsx

@@ -134,6 +134,8 @@ const Preview: React.FC<PreviewProps> = props => {
     toolbarRender,
     onTransform,
     onChange,
+    classNames: imageClassNames,
+    styles,
     ...restProps
   } = props;
 
@@ -339,6 +341,8 @@ const Preview: React.FC<PreviewProps> = props => {
         onReset={onReset}
         zIndex={restProps.zIndex !== undefined ? restProps.zIndex + 1 : undefined}
         image={image}
+        classNames={imageClassNames}
+        styles={styles}
       />
     </>
   );

tests/basic.test.tsx

@@ -97,4 +97,23 @@ describe('Basic', () => {
     const operationsElement = baseElement.querySelector('.rc-image-preview-operations-wrapper');
     expect(operationsElement).toHaveStyle({ zIndex: 10000 });
   });
+  it('support classnames and styles', () => {
+    const customClassnames = {
+      actions: 'custom-actions',
+    };
+    const customStyles = {
+      actions: { backgroundColor: 'blue' },
+    };
+    const { baseElement } = render(
+      <Image
+        styles={customStyles}
+        classNames={customClassnames}
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        preview={{ zIndex: 9999, visible: true }}
+      />,
+    );
+    const actionsElement = baseElement.querySelector('.rc-image-preview-operations');
+    expect(actionsElement).toHaveClass('custom-actions');
+    expect(actionsElement).toHaveStyle({ backgroundColor: 'blue' });
+  });
 });

tests/preview.test.tsx

@@ -1030,4 +1030,24 @@ describe('Preview', () => {
     expect(previewImg).not.toHaveAttribute('width');
     expect(previewImg).not.toHaveAttribute('height');
   });
+  it('support classnames and styles', () => {
+    const customClassnames = {
+      mask: 'custom-mask',
+    };
+    const customStyles = {
+      mask: { color: 'red' },
+    };
+    render(
+      <Image
+        styles={customStyles}
+        classNames={customClassnames}
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        preview={{
+          mask: 'Bamboo Is Light',
+        }}
+      />,
+    );
+    expect(document.querySelector('.rc-image-mask')).toHaveClass('custom-mask');
+    expect(document.querySelector('.rc-image-mask')).toHaveStyle({ color: 'red' });
+  });
 });