style: fix Tree node hover bg of unselectable (#28269)

close #28217

components/tree/Tree.tsx

@@ -153,6 +153,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     blockNode,
     children,
     checkable,
+    selectable,
   } = props;
   const prefixCls = getPrefixCls('tree', customizePrefixCls);
   const newProps = {
@@ -171,12 +172,14 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
         {
           [`${prefixCls}-icon-hide`]: !showIcon,
           [`${prefixCls}-block-node`]: blockNode,
+          [`${prefixCls}-unselectable`]: !selectable,
           [`${prefixCls}-rtl`]: direction === 'rtl',
         },
         className,
       )}
       direction={direction}
       checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
+      selectable={selectable}
       switcherIcon={(nodeProps: AntTreeNodeProps) =>
         renderSwitcherIcon(prefixCls, switcherIcon, showLine, nodeProps)
       }
@@ -192,6 +195,7 @@ Tree.DirectoryTree = DirectoryTree;
 
 Tree.defaultProps = {
   checkable: false,
+  selectable: true,
   showIcon: false,
   motion: {
     ...collapseMotion,

components/tree/style/mixin.less

@@ -41,18 +41,6 @@
   }
 }
 
-.antTreeShowLineIcon(@type) {
-  .@{tree-prefix-cls}-switcher-icon,
-  .@{tree-select-prefix-cls}-switcher-icon {
-    display: inline-block;
-    font-weight: normal;
-    font-size: 12px;
-    svg {
-      transition: transform 0.3s;
-    }
-  }
-}
-
 .antTreeFn(@custom-tree-prefix-cls) {
   @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
   .reset-component;
@@ -170,7 +158,7 @@
   }
 
   // >>> Checkbox
-  & &-checkbox {
+  &-checkbox {
     top: initial;
     margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
   }
@@ -211,6 +199,11 @@
     }
   }
 
+  // https://github.com/ant-design/ant-design/issues/28217
+  &-unselectable &-node-content-wrapper:hover {
+    background-color: transparent;
+  }
+
   // ==================== Draggable =====================
   &-node-content-wrapper[draggable='true'] {
     line-height: @tree-title-height;

components/tree/style/rtl.less

@@ -55,7 +55,7 @@
     }
   }
   // >>> Checkbox
-  & &-checkbox {
+  &-checkbox {
     .@{tree-prefix-cls}-rtl& {
       margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
     }
@@ -64,7 +64,7 @@
 
 .@{select-tree-prefix-cls} {
   // >>> Checkbox
-  & &-checkbox {
+  &-checkbox {
     .@{tree-prefix-cls}-select-dropdown-rtl & {
       margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
     }