Merge 30c140d into fb157e9

Author: MadCcc

src/NoticeList.tsx

@@ -96,7 +96,13 @@ const NoticeList: FC<NoticeListProps> = (props) => {
         nodeRef,
       ) => {
         const { key, times } = config as InnerOpenConfig;
-        const { className: configClassName, style: configStyle } = config as NoticeConfig;
+        const {
+          className: configClassName,
+          style: configStyle,
+          classNames: configClassNames,
+          styles: configStyles,
+          ...restConfig
+        } = config as NoticeConfig;
         const dataIndex = keys.findIndex((item) => item.key === key);
 
         // If dataIndex is -1, that means this notice has been removed in data, but still in dom
@@ -132,19 +138,23 @@ const NoticeList: FC<NoticeListProps> = (props) => {
         return (
           <div
             ref={nodeRef}
-            className={clsx(`${prefixCls}-notice-wrapper`, motionClassName)}
+            className={clsx(
+              `${prefixCls}-notice-wrapper`,
+              motionClassName,
+              configClassNames?.wrapper,
+            )}
             style={{
               ...motionStyle,
               ...stackStyle,
-              ...configStyle,
+              ...configStyles?.wrapper,
             }}
             onMouseEnter={() =>
               setHoverKeys((prev) => (prev.includes(key) ? prev : [...prev, key]))
             }
             onMouseLeave={() => setHoverKeys((prev) => prev.filter((k) => k !== key))}
           >
             <Notice
-              {...config}
+              {...restConfig}
               ref={(node) => {
                 if (dataIndex > -1) {
                   dictRef.current[key] = node;
@@ -153,7 +163,10 @@ const NoticeList: FC<NoticeListProps> = (props) => {
                 }
               }}
               prefixCls={prefixCls}
+              classNames={configClassNames}
+              styles={configStyles}
               className={clsx(configClassName, ctxCls?.notice)}
+              style={configStyle}
               times={times}
               key={key}
               eventKey={key}

src/interface.ts

@@ -2,13 +2,21 @@ import type React from 'react';
 
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
 
+type NoticeSemanticProps = 'wrapper';
+
 export interface NoticeConfig {
   content?: React.ReactNode;
   duration?: number | null;
   closeIcon?: React.ReactNode;
   closable?: boolean;
   className?: string;
   style?: React.CSSProperties;
+  classNames?: {
+    [key in NoticeSemanticProps]?: string;
+  };
+  styles?: {
+    [key in NoticeSemanticProps]?: React.CSSProperties;
+  };
   /** @private Internal usage. Do not override in your code */
   props?: React.HTMLAttributes<HTMLDivElement> & Record<string, any>;
 

tests/index.test.tsx

@@ -493,6 +493,46 @@ describe('Notification.Basic', () => {
     });
   });
 
+  it('should open style and className work', () => {
+    const { instance } = renderDemo();
+
+    act(() => {
+      instance.open({
+        style: {
+          content: 'little',
+        },
+        className: 'bamboo',
+      });
+    });
+
+    expect(document.querySelector('.rc-notification-notice')).toHaveStyle({
+      content: 'little',
+    });
+    expect(document.querySelector('.rc-notification-notice')).toHaveClass('bamboo');
+  });
+
+  it('should open styles and classNames work', () => {
+    const { instance } = renderDemo();
+
+    act(() => {
+      instance.open({
+        styles: {
+          wrapper: {
+            content: 'little',
+          },
+        },
+        classNames: {
+          wrapper: 'bamboo',
+        },
+      });
+    });
+
+    expect(document.querySelector('.rc-notification-notice-wrapper')).toHaveStyle({
+      content: 'little',
+    });
+    expect(document.querySelector('.rc-notification-notice-wrapper')).toHaveClass('bamboo');
+  });
+
   it('should className work', () => {
     const { instance } = renderDemo({
       className: (placement) => `bamboo-${placement}`,