feat: support classNames and styles

src/Tree.tsx

@@ -83,10 +83,13 @@ export type DraggableConfig = {
 
 export type ExpandAction = false | 'click' | 'doubleClick';
 
+export type SemanticName = 'itemIcon' | 'item' | 'itemTitle';
 export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
   prefixCls: string;
   className?: string;
   style?: React.CSSProperties;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticName, string>>;
   focusable?: boolean;
   activeKey?: Key | null;
   tabIndex?: number;
@@ -1363,6 +1366,8 @@ class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends Rea
       prefixCls,
       className,
       style,
+      styles,
+      classNames: treeClassNames,
       showLine,
       focusable,
       tabIndex = 0,
@@ -1410,6 +1415,8 @@ class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends Rea
     }
 
     const contextValue = {
+      styles,
+      classNames: treeClassNames,
       prefixCls,
       selectable,
       showIcon,

src/TreeNode.tsx

@@ -39,6 +39,7 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
   } = props;
 
   const context = React.useContext(TreeContext);
+  const { classNames: treeClassNames, styles } = context || {};
 
   const unstableContext = React.useContext(UnstableContext);
 
@@ -290,10 +291,12 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
     return (
       <span
         className={classNames(
+          treeClassNames?.itemIcon,
           `${context.prefixCls}-iconEle`,
           `${context.prefixCls}-icon__${nodeState || 'docu'}`,
           { [`${context.prefixCls}-icon_loading`]: loading },
         )}
+        style={styles?.itemIcon}
       />
     );
   }, [context.prefixCls, nodeState, loading]);
@@ -339,9 +342,11 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
       $icon = currentIcon ? (
         <span
           className={classNames(
+            treeClassNames?.itemIcon,
             `${context.prefixCls}-iconEle`,
             `${context.prefixCls}-icon__customize`,
           )}
+          style={styles?.itemIcon}
         >
           {typeof currentIcon === 'function' ? currentIcon(props) : currentIcon}
         </span>
@@ -376,7 +381,12 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
         onDoubleClick={onSelectorDoubleClick}
       >
         {$icon}
-        <span className={`${context.prefixCls}-title`}>{titleNode}</span>
+        <span
+          className={classNames(`${context.prefixCls}-title`, treeClassNames?.itemTitle)}
+          style={styles?.itemTitle}
+        >
+          {titleNode}
+        </span>
         {dropIndicatorNode}
       </span>
     );
@@ -411,7 +421,7 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
       ref={domRef}
       role="treeitem"
       aria-expanded={isLeaf ? undefined : expanded}
-      className={classNames(className, `${context.prefixCls}-treenode`, {
+      className={classNames(className, `${context.prefixCls}-treenode`, treeClassNames?.item, {
         [`${context.prefixCls}-treenode-disabled`]: isDisabled,
         [`${context.prefixCls}-treenode-switcher-${expanded ? 'open' : 'close'}`]: !isLeaf,
         [`${context.prefixCls}-treenode-checkbox-checked`]: checked,
@@ -430,7 +440,7 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
         'filter-node': context.filterTreeNode?.(convertNodePropsToEventData(props)),
         [`${context.prefixCls}-treenode-leaf`]: memoizedIsLeaf,
       })}
-      style={style}
+      style={{ ...style, ...styles?.item }}
       // Draggable config
       draggable={draggableWithoutDisabled}
       onDragStart={draggableWithoutDisabled ? onDragStart : undefined}

src/contextTypes.ts

@@ -13,7 +13,7 @@ import type {
   KeyEntities,
   TreeNodeProps,
 } from './interface';
-import type { DraggableConfig } from './Tree';
+import type { DraggableConfig, SemanticName } from './Tree';
 
 export type NodeMouseEventParams<
   TreeDataType extends BasicDataNode = DataNode,
@@ -40,6 +40,8 @@ export type NodeDragEventHandler<
 > = (e: React.DragEvent<T>, nodeProps: TreeNodeProps<TreeDataType>, outsideTree?: boolean) => void;
 
 export interface TreeContextProps<TreeDataType extends BasicDataNode = DataNode> {
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticName, string>>;
   prefixCls: string;
   selectable: boolean;
   showIcon: boolean;

tests/Tree.spec.tsx

@@ -1364,4 +1364,51 @@ describe('Tree Basic', () => {
     const treeNodes = container.querySelectorAll('.rc-tree-treenode-leaf');
     expect(treeNodes.length).toBe(4);
   });
+  it('support classNames and styles', () => {
+    const data = [
+      {
+        title: '0-0',
+        key: '0-0',
+        children: [
+          { title: '0-0-0', key: '0-0-0' },
+          {
+            title: '0-0-1',
+            key: '0-0-1',
+            children: [
+              { title: '0-0-1-0', key: '0-0-1-0' },
+              { title: '0-0-1-1', key: '0-0-1-1' },
+            ],
+          },
+        ],
+      },
+      { title: '0-1', key: '0-1' },
+    ];
+    const testClassNames = {
+      item: 'test-item',
+      itemIcon: 'test-icon',
+      itemTitle: 'test-title',
+    };
+    const testStyles = {
+      item: { background: 'red' },
+      itemIcon: { color: 'blue' },
+      itemTitle: { color: 'yellow' },
+    };
+    const { container } = render(
+      <Tree
+        treeData={data}
+        expandedKeys={['0-0', '0-0-1']}
+        styles={testStyles}
+        classNames={testClassNames}
+      />,
+    );
+    const item = container.querySelector(`.${testClassNames.item}`);
+    const icon = container.querySelector('.rc-tree-iconEle');
+    const title = container.querySelector('.rc-tree-title');
+
+    expect(icon).toHaveStyle(testStyles.itemIcon);
+    expect(icon).toHaveClass(testClassNames.itemIcon);
+    expect(title).toHaveStyle(testStyles.itemTitle);
+    expect(title).toHaveClass(testClassNames.itemTitle);
+    expect(item).toHaveStyle(testStyles.item);
+  });
 });