chore: of it

Author: zombieJ

docs/examples/basic.tsx

@@ -51,7 +51,16 @@ export default () => {
       <div style={{ display: 'flex', flexWrap: 'wrap' }}>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
-          <Picker<Moment> {...sharedProps} locale={zhCN} suffixIcon="SUFFIX" />
+          <Picker<Moment>
+            {...sharedProps}
+            locale={zhCN}
+            suffixIcon="SUFFIX"
+            rootClassName="bamboo"
+            className="little"
+            classNames={{
+              root: 'light',
+            }}
+          />
           <Picker<Moment> {...sharedProps} locale={enUS} />
         </div>
         <div style={{ margin: '0 8px' }}>

src/PickerInput/RangePicker.tsx

@@ -1,4 +1,5 @@
 import { useEvent, useMergedState } from '@rc-component/util';
+import cls from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import omit from '@rc-component/util/lib/omit';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -159,6 +160,7 @@ function RangePicker<DateType extends object = any>(
   const {
     // Style
     prefixCls,
+    rootClassName,
     styles: propStyles,
     classNames: propClassNames,
 
@@ -770,7 +772,7 @@ function RangePicker<DateType extends object = any>(
         {...pickTriggerProps(filledProps)}
         popupElement={panel}
         popupStyle={mergedStyles.popup.root}
-        popupClassName={mergedClassNames.popup.root}
+        popupClassName={cls(rootClassName, mergedClassNames.popup.root)}
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}
@@ -782,6 +784,12 @@ function RangePicker<DateType extends object = any>(
           {...filledProps}
           // Ref
           ref={selectorRef}
+          // Style
+          className={cls(filledProps.className, rootClassName, mergedClassNames.root)}
+          style={{
+            ...mergedStyles.root,
+            ...filledProps.style,
+          }}
           // Icon
           suffixIcon={suffixIcon}
           // Active

src/PickerInput/SinglePicker.tsx

@@ -1,4 +1,5 @@
 import { useEvent, useMergedState } from '@rc-component/util';
+import cls from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import omit from '@rc-component/util/lib/omit';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -123,6 +124,7 @@ function Picker<DateType extends object = any>(
   const {
     // Style
     prefixCls,
+    rootClassName,
     styles: propStyles,
     classNames: propClassNames,
 
@@ -630,7 +632,7 @@ function Picker<DateType extends object = any>(
         {...pickTriggerProps(filledProps)}
         popupElement={panel}
         popupStyle={mergedStyles.popup.root}
-        popupClassName={mergedClassNames.popup.root}
+        popupClassName={cls(rootClassName, mergedClassNames.popup.root)}
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}
@@ -640,6 +642,12 @@ function Picker<DateType extends object = any>(
           {...filledProps}
           // Ref
           ref={selectorRef}
+          // Style
+          className={cls(filledProps.className, rootClassName, mergedClassNames.root)}
+          style={{
+            ...mergedStyles.root,
+            ...filledProps.style,
+          }}
           // Icon
           suffixIcon={suffixIcon}
           removeIcon={removeIcon}

src/interface.tsx

@@ -329,12 +329,13 @@ export interface SharedPickerProps<DateType extends object = any>
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
+  rootClassName?: string;
 
   styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
-    popup: Partial<Record<PanelSemanticName, React.CSSProperties>>;
+    popup?: Partial<Record<PanelSemanticName, React.CSSProperties>>;
   };
   classNames?: Partial<Record<SemanticName, string>> & {
-    popup: Partial<Record<PanelSemanticName, string>>;
+    popup?: Partial<Record<PanelSemanticName, string>>;
   };
 
   // Config