fix: merge classNames and styles in the panel, and add test

Author: keiseiTi

src/hooks/useItems.tsx

@@ -1,7 +1,8 @@
 import toArray from '@rc-component/util/lib/Children/toArray';
 import React from 'react';
-import type { CollapsePanelProps, CollapseProps, ItemType } from '../interface';
+import type { CollapsePanelProps, CollapseProps, ItemType, SemanticName } from '../interface';
 import CollapsePanel from '../Panel';
+import clsx from 'clsx';
 
 type Props = Pick<
   CollapsePanelProps,
@@ -59,17 +60,29 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
       isActive = activeKey.indexOf(key) > -1;
     }
 
+    const mergeClassNames: Partial<Record<SemanticName, string>> = {
+      ...collapseClassNames,
+      header: clsx(collapseClassNames?.header, classNames?.header),
+      body: clsx(collapseClassNames?.body, classNames?.body),
+    };
+
+    const mergeStyles: Partial<Record<SemanticName, React.CSSProperties>> = {
+      ...collapseStyles,
+      header: {
+        ...collapseStyles?.header,
+        ...styles?.header,
+      },
+      body: {
+        ...collapseStyles?.body,
+        ...styles?.body,
+      },
+    };
+
     return (
       <CollapsePanel
         {...restProps}
-        classNames={{
-          ...collapseClassNames,
-          ...classNames,
-        }}
-        styles={{
-          ...collapseStyles,
-          ...styles,
-        }}
+        classNames={mergeClassNames}
+        styles={mergeStyles}
         prefixCls={prefixCls}
         key={key}
         panelKey={key}

tests/index.spec.tsx

@@ -898,5 +898,59 @@ describe('collapse', () => {
       expect(titleElement.style.color).toBe('green');
       expect(iconElement.style.color).toBe('yellow');
     });
+
+    it('should support styles and classNames in panel', () => {
+      const customStyles = {
+        header: { color: 'red' },
+        body: { color: 'blue' },
+        title: { color: 'green' },
+        icon: { color: 'yellow' },
+      };
+      const customClassnames = {
+        header: 'custom-header',
+        body: 'custom-body',
+      };
+
+      const { container } = render(
+        <Collapse
+          activeKey={['1']}
+          styles={customStyles}
+          classNames={customClassnames}
+          items={[
+            {
+              key: '1',
+              styles: {
+                header: {
+                  color: 'blue',
+                  fontSize: 20,
+                },
+                body: {
+                  fontSize: 20,
+                },
+              },
+              classNames: {
+                header: 'custom-header-panel',
+                body: 'custom-body-panel',
+              },
+              label: 'title',
+            },
+          ]}
+        />,
+      );
+      const headerElement = container.querySelector('.rc-collapse-header') as HTMLElement;
+      const bodyElement = container.querySelector('.rc-collapse-body') as HTMLElement;
+
+      // check classNames
+      expect(headerElement.classList).toContain('custom-header');
+      expect(headerElement.classList).toContain('custom-header-panel');
+      expect(bodyElement.classList).toContain('custom-body');
+      expect(bodyElement.classList).toContain('custom-body-panel');
+
+      // check styles
+      expect(headerElement.style.color).toBe('blue');
+      expect(headerElement.style.fontSize).toBe('20px');
+      expect(bodyElement.style.color).toBe('blue');
+      expect(bodyElement.style.fontSize).toBe('20px');
+    });
   });
 });