draft

Author: thinkasany

package.json

@@ -45,8 +45,8 @@
   },
   "dependencies": {
     "classnames": "2.x",
-    "@rc-component/select": "~1.0.0",
-    "@rc-component/tree": "~1.0.0",
+    "@rc-component/select": "~1.0.2",
+    "@rc-component/tree": "~1.0.1",
     "@rc-component/util": "^1.2.1"
   },
   "devDependencies": {

src/OptionList.tsx

@@ -50,6 +50,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     leftMaxCount,
     leafCountOnly,
     valueEntities,
+    classNames: treeClassNames,
+    styles,
   } = React.useContext(TreeSelectContext);
 
   const {
@@ -342,6 +344,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
       )}
       <UnstableContext.Provider value={{ nodeDisabled }}>
         <Tree
+          classNames={treeClassNames}
+          styles={styles}
           ref={treeRef}
           focusable={false}
           prefixCls={`${prefixCls}-tree`}

src/TreeSelect.tsx

@@ -174,6 +174,9 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeTitleRender,
 
     onPopupScroll,
+
+    classNames: treeSelectClassNames,
+    styles,
     ...restProps
   } = props;
 
@@ -623,6 +626,8 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       leafCountOnly:
         mergedShowCheckedStrategy === 'SHOW_CHILD' && !treeCheckStrictly && !!treeCheckable,
       valueEntities,
+      classNames: treeSelectClassNames,
+      styles,
     };
   }, [
     virtual,
@@ -642,6 +647,8 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeCheckStrictly,
     treeCheckable,
     valueEntities,
+    treeSelectClassNames,
+    styles,
   ]);
 
   // ======================= Legacy Context =======================
@@ -693,6 +700,16 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
         <BaseSelect
           ref={ref}
           {...restProps}
+          classNames={{
+            prefix: treeSelectClassNames?.prefix,
+            suffix: treeSelectClassNames?.suffix,
+            input: treeSelectClassNames?.input,
+          }}
+          styles={{
+            prefix: styles?.prefix,
+            suffix: styles?.suffix,
+            input: styles?.input,
+          }}
           // >>> MISC
           id={mergedId}
           prefixCls={prefixCls}

src/TreeSelectContext.ts

@@ -3,6 +3,7 @@ import type { ExpandAction } from '@rc-component/tree/lib/Tree';
 import type { DataNode, FieldNames, Key } from './interface';
 import type useDataEntities from './hooks/useDataEntities';
 
+export type SemanticName = 'itemIcon' | 'item' | 'itemTitle' | 'input' | 'prefix' | 'suffix';
 export interface TreeSelectContextProps {
   virtual?: boolean;
   popupMatchSelectWidth?: boolean | number;
@@ -21,6 +22,8 @@ export interface TreeSelectContextProps {
   /** When `true`, only take leaf node as count, or take all as count with `maxCount` limitation */
   leafCountOnly: boolean;
   valueEntities: ReturnType<typeof useDataEntities>['valueEntities'];
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticName, string>>;
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);