feat: support semantic for panel (#923)

* feat: support semantic for pannel

* add test

Author: thinkasany

src/PickerPanel/index.tsx

@@ -127,20 +127,26 @@ export interface SinglePickerPanelProps<DateType extends object = any>
   onChange?: (date: DateType) => void;
 }
 
+type PanelSemanticName = 'popupBody' | 'popupContent';
 export type PickerPanelProps<DateType extends object = any> = BasePickerPanelProps<DateType> & {
   /** multiple selection. Not support time or datetime picker */
   multiple?: boolean;
 
   defaultValue?: DateType | DateType[] | null;
   value?: DateType | DateType[] | null;
   onChange?: (date: DateType | DateType[]) => void;
+  styles?: Partial<Record<PanelSemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<PanelSemanticName, string>>;
 };
 
 function PickerPanel<DateType extends object = any>(
   props: PickerPanelProps<DateType>,
   ref: React.Ref<PickerPanelRef>,
 ) {
   const {
+    classNames: panelClassNames,
+    styles: panelStyles,
+
     locale,
     generateConfig,
 
@@ -187,7 +193,7 @@ function PickerPanel<DateType extends object = any>(
   const {
     prefixCls: contextPrefixCls,
     classNames: pickerClassNames,
-    styles,
+    styles: pickerStyles,
   } = React.useContext(PickerContext) || {};
 
   // ======================== prefixCls ========================
@@ -372,10 +378,17 @@ function PickerPanel<DateType extends object = any>(
     DatePanel) as typeof DatePanel;
 
   // ======================== Context =========================
+  const mergedStyles = pickerStyles ?? panelStyles;
+  const mergedClassNames = pickerClassNames ?? panelClassNames;
   const parentHackContext = React.useContext(PickerHackContext);
   const pickerPanelContext = React.useMemo(
-    () => ({ ...parentHackContext, hideHeader, classNames: pickerClassNames, styles }),
-    [parentHackContext, hideHeader, pickerClassNames, styles],
+    () => ({
+      ...parentHackContext,
+      hideHeader,
+      classNames: mergedClassNames,
+      styles: mergedStyles,
+    }),
+    [parentHackContext, hideHeader, mergedClassNames, mergedStyles],
   );
 
   // ======================== Warnings ========================

tests/picker.spec.tsx

@@ -8,8 +8,9 @@ import KeyCode from '@rc-component/util/lib/KeyCode';
 import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
-import type { PickerRef } from '../src';
+import { PickerPanel, type PickerRef } from '../src';
 import type { PanelMode, PickerMode } from '../src/interface';
+import momentGenerateConfig from '../src/generate/moment';
 import enUS from '../src/locale/en_US';
 import zhCN from '../src/locale/zh_CN';
 import {
@@ -1371,7 +1372,30 @@ describe('Picker.Basic', () => {
     expect(body).toHaveClass(customClassNames.popupBody);
     expect(body).toHaveStyle(customStyles.popupBody);
   });
-
+  it('support classNames and styles for panel', () => {
+    const customClassNames = {
+      popupBody: 'custom-body',
+      popupContent: 'custom-content',
+    };
+    const customStyles = {
+      popupBody: { color: 'green' },
+      popupContent: { color: 'blue' },
+    };
+    render(
+      <PickerPanel
+        classNames={customClassNames}
+        styles={customStyles}
+        locale={enUS}
+        generateConfig={momentGenerateConfig}
+      />,
+    );
+    const content = document.querySelector('.rc-picker-content');
+    const body = document.querySelector('.rc-picker-body');
+    expect(content).toHaveClass(customClassNames.popupContent);
+    expect(content).toHaveStyle(customStyles.popupContent);
+    expect(body).toHaveClass(customClassNames.popupBody);
+    expect(body).toHaveStyle(customStyles.popupBody);
+  });
   it('showTime config should have format', () => {
     render(
       <DayPicker