feat: support dropdownStyle and merge dropdownMenuColumnStyle to styles prop

src/Cascader.tsx

@@ -1,7 +1,7 @@
 import type { BuildInPlacements } from '@rc-component/trigger/lib/interface';
-import type { BaseSelectProps, BaseSelectPropsWithoutPrivate, BaseSelectRef } from 'rc-select';
+import type { BaseSelectProps,BaseSelectPropsWithoutPrivate,BaseSelectRef } from 'rc-select';
 import { BaseSelect } from 'rc-select';
-import type { DisplayValueType, Placement } from 'rc-select/lib/BaseSelect';
+import type { DisplayValueType,Placement } from 'rc-select/lib/BaseSelect';
 import useId from 'rc-select/lib/hooks/useId';
 import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -14,9 +14,9 @@ import useRefFunc from './hooks/useRefFunc';
 import useSearchConfig from './hooks/useSearchConfig';
 import useSearchOptions from './hooks/useSearchOptions';
 import OptionList from './OptionList';
-import { fillFieldNames, SHOW_CHILD, SHOW_PARENT, toPathKey, toPathKeys } from './utils/commonUtil';
-import { formatStrategyValues, toPathOptions } from './utils/treeUtil';
-import warningProps, { warningNullOptions } from './utils/warningPropsUtil';
+import { fillFieldNames,SHOW_CHILD,SHOW_PARENT,toPathKey,toPathKeys } from './utils/commonUtil';
+import { formatStrategyValues,toPathOptions } from './utils/treeUtil';
+import warningProps,{ warningNullOptions } from './utils/warningPropsUtil';
 
 export interface ShowSearchType<OptionType extends BaseOptionType = DefaultOptionType> {
   filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames) => boolean;
@@ -57,7 +57,7 @@ export interface DefaultOptionType extends BaseOptionType {
   disableCheckbox?: boolean;
 }
 
-interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionType>
+export interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionType>
   extends Omit<
     BaseSelectPropsWithoutPrivate,
     'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'
@@ -97,8 +97,15 @@ interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionTyp
   /** @deprecated Use `dropdownClassName` instead */
   popupClassName?: string;
   dropdownClassName?: string;
+  /** @deprecated Use `styles.dropdownMenuColumn` instead */
   dropdownMenuColumnStyle?: React.CSSProperties;
 
+  // styles
+  styles?: {
+    dropdown?: React.CSSProperties;
+    dropdownMenuColumn?: React.CSSProperties;
+  };
+
   /** @deprecated Use `placement` instead */
   popupPlacement?: Placement;
   placement?: Placement;
@@ -197,8 +204,11 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     popupVisible,
     open,
 
+    styles,
+
     popupClassName,
     dropdownClassName,
+    dropdownStyle,
     dropdownMenuColumnStyle,
 
     popupPlacement,
@@ -448,7 +458,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       expandTrigger,
       expandIcon,
       loadingIcon,
-      dropdownMenuColumnStyle,
+      dropdownMenuColumnStyle: styles?.dropdownMenuColumn ?? dropdownMenuColumnStyle,
     }),
     [
       mergedOptions,
@@ -465,6 +475,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       expandIcon,
       loadingIcon,
       dropdownMenuColumnStyle,
+      styles?.dropdownMenuColumn,
     ],
   );
 
@@ -473,14 +484,21 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
   // ==============================================================
   const emptyOptions = !(mergedSearchValue ? searchOptions : mergedOptions).length;
 
-  const dropdownStyle: React.CSSProperties =
+  const mergedDropdownStyle: React.CSSProperties =
     // Search to match width
-    (mergedSearchValue && searchConfig.matchInputWidth) ||
-    // Empty keep the width
+    styles?.dropdown ??
+    dropdownStyle ??
+    (mergedSearchValue && searchConfig.matchInputWidth) ??
     emptyOptions
-      ? {}
+      ? // Empty keep the width
+        {
+          ...styles?.dropdown,
+          ...dropdownStyle,
+        }
       : {
           minWidth: 'auto',
+          ...styles?.dropdown,
+          ...dropdownStyle,
         };
 
   return (
@@ -492,7 +510,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
         id={mergedId}
         prefixCls={prefixCls}
         dropdownMatchSelectWidth={dropdownMatchSelectWidth}
-        dropdownStyle={dropdownStyle}
+        dropdownStyle={mergedDropdownStyle}
         // Value
         displayValues={displayValues}
         onDisplayValuesChange={onDisplayValuesChange}

src/utils/warningPropsUtil.ts

@@ -1,8 +1,8 @@
 import warning from 'rc-util/lib/warning';
-import type { DefaultOptionType, FieldNames, InternalCascaderProps } from '../Cascader';
+import type { DefaultOptionType, FieldNames, BaseCascaderProps } from '../Cascader';
 
-function warningProps(props: InternalCascaderProps) {
-  const { onPopupVisibleChange, popupVisible, popupClassName, popupPlacement } = props;
+function warningProps(props: BaseCascaderProps) {
+  const { onPopupVisibleChange, popupVisible, popupClassName, popupPlacement,dropdownMenuColumnStyle} = props;
 
   warning(
     !onPopupVisibleChange,
@@ -17,6 +17,10 @@ function warningProps(props: InternalCascaderProps) {
     popupPlacement === undefined,
     '`popupPlacement` is deprecated. Please use `placement` instead.',
   );
+  warning(
+    dropdownMenuColumnStyle === undefined,
+    '`dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.',
+  );
 }
 
 // value in Cascader options should not be null

tests/index.spec.tsx

@@ -4,7 +4,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import Cascader from '../src';
-import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions';
+import { addressOptions,addressOptionsForUneven,optionsForActiveMenuItems } from './demoOptions';
 import { mount } from './enzyme';
 
 describe('Cascader.Basic', () => {
@@ -655,7 +655,8 @@ describe('Cascader.Basic', () => {
         changeOnSelect
         expandTrigger="hover"
         options={addressOptionsForUneven}
-        onChange={onChange}>
+        onChange={onChange}
+      >
         <input readOnly />
       </Cascader>,
     );
@@ -684,7 +685,7 @@ describe('Cascader.Basic', () => {
     wrapper.update();
     expect(selectedValue).toBeFalsy();
     expect(wrapper.isOpen()).toBeTruthy();
-  })
+  });
 
   describe('focus test', () => {
     let domSpy;
@@ -803,9 +804,8 @@ describe('Cascader.Basic', () => {
           expect(activeItems).toHaveLength(2);
           expect(activeItems.last().text()).toEqual('高雄');
         });
-      })
+      });
     });
-
   });
 
   it('defaultValue not exist', () => {
@@ -1063,4 +1063,25 @@ describe('Cascader.Basic', () => {
     );
     errorSpy.mockReset();
   });
+
+  it('`dropdownMenuColumnStyle`in Cascader options should throw a warning', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null);
+    mount(<Cascader dropdownMenuColumnStyle={{}} options={[]} />);
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.',
+    );
+    errorSpy.mockReset();
+  });
+
+    it('`dropdownMenuColumnStyle`in Cascader options should throw a warning', () => {
+      const wrapper = mount(<Cascader
+        styles={{ dropdown: { backgroundColor: 'red' }, dropdownMenuColumn: { backgroundColor: 'blue' } }}
+        options={[]}
+        open
+      />);
+      expect(wrapper.find('.rc-cascader-dropdown').props().style.backgroundColor).toEqual('red');
+      expect(wrapper.find('.rc-cascader-menu-item').props().style.backgroundColor).toEqual('blue');
+    });
+
 });