diff --git a/assets/index.less b/assets/index.less
index 097e655..9000017 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -61,7 +61,7 @@
     }
     .@{prefixCls}-collapsible-header {
       cursor: default;
-      .@{prefixCls}-header-text {
+      .@{prefixCls}-title {
         cursor: pointer;
       }
       .@{prefixCls}-expand-icon {
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 4f21792..6254899 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -52,7 +52,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     typeof expandIcon === 'function' ? expandIcon(props) : <i className="arrow" />;
   const iconNode = iconNodeInner && (
     <div
-      className={`${prefixCls}-expand-icon`}
+      className={classNames(`${prefixCls}-expand-icon`, customizeClassNames?.icon)}
+      style={styles?.icon}
       {...(['header', 'icon'].includes(collapsible) ? collapsibleProps : {})}
     >
       {iconNodeInner}
@@ -74,13 +75,13 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     {
       [`${prefixCls}-collapsible-${collapsible}`]: !!collapsible,
     },
-    customizeClassNames.header,
+    customizeClassNames?.header,
   );
 
   // ======================== HeaderProps ========================
   const headerProps: React.HTMLAttributes<HTMLDivElement> = {
     className: headerClassName,
-    style: styles.header,
+    style: styles?.header,
     ...(['header', 'icon'].includes(collapsible) ? {} : collapsibleProps),
   };
 
@@ -90,7 +91,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
       <div {...headerProps}>
         {showArrow && iconNode}
         <span
-          className={`${prefixCls}-header-text`}
+          className={classNames(`${prefixCls}-title`, customizeClassNames?.title)}
+          style={styles?.title}
           {...(collapsible === 'header' ? collapsibleProps : {})}
         >
           {header}
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index 37bb031..dac6aa9 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -45,7 +45,7 @@ const PanelContent = React.forwardRef<
       role={role}
     >
       <div
-        className={classnames(`${prefixCls}-content-box`, customizeClassNames?.body)}
+        className={classnames(`${prefixCls}-body`, customizeClassNames?.body)}
         style={styles?.body}
       >
         {children}
diff --git a/src/interface.ts b/src/interface.ts
index 7ab9aba..f6ca109 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -39,6 +39,7 @@ export interface CollapseProps {
   items?: ItemType[];
 }
 
+export type SemanticName = 'header' | 'title' | 'body' | 'icon';
 export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
   id?: string;
   header?: string | React.ReactNode;
@@ -46,9 +47,9 @@ export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement>
   headerClass?: string;
   showArrow?: boolean;
   className?: string;
-  classNames?: { header?: string; body?: string };
+  classNames?: Partial<Record<SemanticName, string>>;
   style?: object;
-  styles?: { header?: React.CSSProperties; body?: React.CSSProperties };
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   isActive?: boolean;
   openMotion?: CSSMotionProps;
   destroyInactivePanel?: boolean;
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index 34c8c4a..8e1a456 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`collapse props items should work with nested 1`] = `
         />
       </div>
       <span
-        class="rc-collapse-header-text"
+        class="rc-collapse-title"
       >
         collapse 1
       </span>
@@ -46,7 +46,7 @@ exports[`collapse props items should work with nested 1`] = `
         />
       </div>
       <span
-        class="rc-collapse-header-text"
+        class="rc-collapse-title"
       >
         collapse 2
       </span>
@@ -77,7 +77,7 @@ exports[`collapse props items should work with nested 1`] = `
         />
       </div>
       <span
-        class="rc-collapse-header-text"
+        class="rc-collapse-title"
       >
         collapse 3
       </span>
@@ -101,7 +101,7 @@ exports[`collapse props items should work with nested 1`] = `
         />
       </div>
       <span
-        class="rc-collapse-header-text"
+        class="rc-collapse-title"
       >
         title 3
       </span>
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index c08d7ce..3b23a22 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -86,7 +86,7 @@ describe('collapse', () => {
       fireEvent.click(header);
       jest.runAllTimers();
       expect(collapse.container.querySelector('.rc-collapse-content-inactive')?.innerHTML).toBe(
-        '<div class="rc-collapse-content-box">second</div>',
+        '<div class="rc-collapse-body">second</div>',
       );
       expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
     });
@@ -528,7 +528,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
+      expect(container.querySelector('.rc-collapse-title')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
       expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
     });
@@ -540,10 +540,10 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
+      expect(container.querySelector('.rc-collapse-title')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
       expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
-      fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
+      fireEvent.click(container.querySelector('.rc-collapse-title')!);
       expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
     });
     it('should work when value is icon', () => {
@@ -569,7 +569,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
+      expect(container.querySelector('.rc-collapse-title')).toBeTruthy();
       expect(container.querySelectorAll('.rc-collapse-item-disabled')).toHaveLength(1);
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
       expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
@@ -583,7 +583,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
+      expect(container.querySelector('.rc-collapse-title')).toBeTruthy();
 
       expect(container.querySelectorAll('.rc-collapse-item-disabled')).toHaveLength(1);
 
@@ -613,7 +613,7 @@ describe('collapse', () => {
         </Collapse>,
       );
 
-      fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
+      fireEvent.click(container.querySelector('.rc-collapse-title')!);
       expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
     });
   });
@@ -861,6 +861,19 @@ describe('collapse', () => {
     });
 
     it('should support styles and classNames', () => {
+      const customStyles = {
+        header: { color: 'red' },
+        body: { color: 'blue' },
+        title: { color: 'green' },
+        icon: { color: 'yellow' },
+      };
+      const customClassnames = {
+        header: 'custom-header',
+        body: 'custom-body',
+        title: 'custom-title',
+        icon: 'custom-icon',
+      };
+
       const { container } = render(
         <Collapse
           activeKey={['1']}
@@ -868,18 +881,28 @@ describe('collapse', () => {
             {
               key: '1',
               label: 'title',
-              styles: { header: { color: 'red' }, body: { color: 'blue' } },
-              classNames: { header: 'header-class', body: 'body-class' },
+              styles: customStyles,
+              classNames: customClassnames,
             },
           ]}
         />,
       );
-
-      expect(container.querySelector('.rc-collapse-header')).toHaveClass('header-class');
-      expect(container.querySelector('.rc-collapse-content-box')).toHaveClass('body-class');
-
-      expect(container.querySelector('.rc-collapse-header')).toHaveStyle({ color: 'red' });
-      expect(container.querySelector('.rc-collapse-content-box')).toHaveStyle({ color: 'blue' });
+      const headerElement = container.querySelector('.rc-collapse-header') as HTMLElement;
+      const bodyElement = container.querySelector('.rc-collapse-body') as HTMLElement;
+      const titleElement = container.querySelector('.rc-collapse-title') as HTMLElement;
+      const iconElement = container.querySelector('.rc-collapse-expand-icon') as HTMLElement;
+
+      // check classNames
+      expect(headerElement.classList).toContain('custom-header');
+      expect(bodyElement.classList).toContain('custom-body');
+      expect(titleElement.classList).toContain('custom-title');
+      expect(iconElement.classList).toContain('custom-icon');
+
+      // check styles
+      expect(headerElement.style.color).toBe('red');
+      expect(bodyElement.style.color).toBe('blue');
+      expect(titleElement.style.color).toBe('green');
+      expect(iconElement.style.color).toBe('yellow');
     });
   });
 });