feat: ConfigProvider support Tree className and style (#43060)

components/config-provider/__tests__/style.test.tsx

@@ -33,6 +33,7 @@ import Switch from '../../switch';
 import Table from '../../table';
 import Tabs from '../../tabs';
 import Tag from '../../tag';
+import Tree from '../../tree';
 import Typography from '../../typography';
 import Upload from '../../upload';
 
@@ -721,4 +722,48 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-notification');
     expect(element).toHaveStyle({ color: 'blue' });
   });
+  
+  it('Should Tree className works', () => {
+    const treeData = [
+      {
+        title: 'test-title',
+        key: '0-0',
+      },
+    ];
+
+    const { container } = render(
+      <ConfigProvider
+        tree={{
+          className: 'test-class',
+        }}
+      >
+        <Tree treeData={treeData} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-tree')).toHaveClass('test-class');
+  });
+
+  it('Should Tree style works', () => {
+    const treeData = [
+      {
+        title: 'test-title',
+        key: '0-0',
+      },
+    ];
+
+    const { container } = render(
+      <ConfigProvider
+        tree={{
+          style: { color: 'red' },
+        }}
+      >
+        <Tree treeData={treeData} style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-tree-list')).toHaveStyle(
+      'color: red; font-size: 16px; position: relative;',
+    );
+  });
 });

components/config-provider/context.ts

@@ -124,6 +124,7 @@ export interface ConfigConsumerProps {
   tabs?: ComponentStyleConfig;
   upload?: ComponentStyleConfig;
   notification?: ComponentStyleConfig;
+  tree?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

components/config-provider/index.en-US.md

@@ -134,6 +134,7 @@ const {
 | table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | upload | Set Upload common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 

components/config-provider/index.tsx

@@ -168,6 +168,7 @@ export interface ConfigProviderProps {
   tabs?: ComponentStyleConfig;
   upload?: ComponentStyleConfig;
   notification?: ComponentStyleConfig;
+  tree?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -288,6 +289,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tabs,
     upload,
     notification,
+    tree,
   } = props;
 
   // =================================== Warning ===================================
@@ -370,6 +372,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tabs,
     upload,
     notification,
+    tree,
   };
 
   const config = {

components/config-provider/index.zh-CN.md

@@ -136,6 +136,7 @@ const {
 | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 

components/tree/Tree.tsx

@@ -156,7 +156,7 @@ export interface TreeProps<T extends BasicDataNode = DataNode>
 }
 
 const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
-  const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, virtual, tree } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -169,6 +169,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     selectable = true,
     draggable,
     motion: customMotion,
+    style,
   } = props;
 
   const prefixCls = getPrefixCls('tree', customizePrefixCls);
@@ -232,6 +233,8 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
       ref={ref}
       virtual={virtual}
       {...newProps}
+      // newProps may contain style so declare style below it
+      style={{ ...tree?.style, ...style }}
       prefixCls={prefixCls}
       className={classNames(
         {
@@ -240,6 +243,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
           [`${prefixCls}-unselectable`]: !selectable,
           [`${prefixCls}-rtl`]: direction === 'rtl',
         },
+        tree?.className,
         className,
         hashId,
       )}