fix: table filterDropdown should accept cssvar (#46314)

components/table/InternalTable.tsx

@@ -202,6 +202,10 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
   const prefixCls = getPrefixCls('table', customizePrefixCls);
   const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls);
 
+  const [, token] = useToken();
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+
   const mergedExpandable: ExpandableConfig<RecordType> = {
     childrenColumnName: legacyChildrenColumnName,
     expandIconColumnIndex,
@@ -349,6 +353,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     mergedColumns,
     onFilterChange,
     getPopupContainer: getPopupContainer || getContextPopupContainer,
+    rootClassName: classNames(rootClassName, rootCls),
   });
   const mergedData = getFilterData(sortedData, filterStates);
 
@@ -538,10 +543,6 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     };
   }
 
-  const [, token] = useToken();
-  const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
-
   const wrapperClassNames = classNames(
     rootCls,
     `${prefixCls}-wrapper`,

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -133,6 +133,7 @@ export interface FilterDropdownProps<RecordType> {
   locale: TableLocale;
   getPopupContainer?: GetPopupContainer;
   filterResetToDefaultFilteredValue?: boolean;
+  rootClassName?: string;
 }
 
 function wrapStringListType(keys?: FilterKey) {
@@ -154,6 +155,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     locale,
     children,
     getPopupContainer,
+    rootClassName,
   } = props;
 
   const {
@@ -524,6 +526,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
         onOpenChange={onVisibleChange}
         getPopupContainer={getPopupContainer}
         placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
+        rootClassName={rootClassName}
       >
         <span
           role="button"

components/table/hooks/useFilter/index.tsx

@@ -76,6 +76,7 @@ function injectFilter<RecordType>(
   triggerFilter: (filterState: FilterState<RecordType>) => void,
   getPopupContainer?: GetPopupContainer,
   pos?: string,
+  rootClassName?: string,
 ): ColumnsType<RecordType> {
   return columns.map((column, index) => {
     const columnPos = getColumnPos(index, pos);
@@ -103,6 +104,7 @@ function injectFilter<RecordType>(
             triggerFilter={triggerFilter}
             locale={locale}
             getPopupContainer={getPopupContainer}
+            rootClassName={rootClassName}
           >
             {renderColumnTitle(column.title, renderProps)}
           </FilterDropdown>
@@ -122,6 +124,7 @@ function injectFilter<RecordType>(
           triggerFilter,
           getPopupContainer,
           columnPos,
+          rootClassName,
         ),
       };
     }
@@ -184,6 +187,7 @@ interface FilterConfig<RecordType> {
     filterStates: FilterState<RecordType>[],
   ) => void;
   getPopupContainer?: GetPopupContainer;
+  rootClassName?: string;
 }
 
 const getMergedColumns = <RecordType extends unknown>(
@@ -203,6 +207,7 @@ function useFilter<RecordType>({
   onFilterChange,
   getPopupContainer,
   locale: tableLocale,
+  rootClassName,
 }: FilterConfig<RecordType>): [
   TransformColumns<RecordType>,
   FilterState<RecordType>[],
@@ -282,6 +287,8 @@ function useFilter<RecordType>({
       tableLocale,
       triggerFilter,
       getPopupContainer,
+      undefined,
+      rootClassName,
     );
 
   return [transformColumns, mergedFilterStates, filters];