切换红色主题

build/Tree.css

@@ -222,6 +222,10 @@
     list-style: none;
     white-space: nowrap;
     outline: 0; }
+    .u-tree li:first-child {
+      padding-top: 8px; }
+    .u-tree li:last-child {
+      padding-bottom: 0; }
   .u-tree li a[draggable],
   .u-tree li a[draggable="true"] {
     -webkit-user-select: none;
@@ -247,15 +251,17 @@
     padding: 0 0 0 18px; }
   .u-tree li a {
     display: inline-block;
-    padding: 1px 5px;
+    padding: 0px 5px;
     border-radius: 2px;
     margin: 0;
     cursor: pointer;
     text-decoration: none;
-    vertical-align: top;
+    vertical-align: middle;
     color: #666;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease; }
+    .u-tree li a.u-tree-node-content-wrapper {
+      width: calc(100% - 18px); }
   .u-tree li a:hover {
     background-color: rgb(235, 236, 240); }
   .u-tree li a.u-tree-node-selected {

build/TreeNode.js

@@ -528,11 +528,11 @@ var TreeNode = function (_React$Component) {
       }
       return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(cls) });
     };
-
+    var selectedCls = props.selected ? prefixCls + '-treenode-selected' : '';
     return _react2["default"].createElement(
       'li',
       _extends({}, liProps, { ref: 'li', style: props.style,
-        className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls)
+        className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls, selectedCls)
       }),
       canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher(),
       props.checkable ? this.renderCheckbox(props) : null,

demo/demolist/Demo2.js

@@ -2,7 +2,7 @@
 *
 * @title Tree数据可控示例
 * @description
-*
+* 
 */
 
 import React, { Component } from 'react';
@@ -86,6 +86,7 @@ class Demo2 extends Component{
       <Tree
         checkable
         focusable
+        className={'demo2'}
         onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
         autoExpandParent={this.state.autoExpandParent}
         onCheck={this.onCheck} 

demo/demolist/Demo2.scss

@@ -0,0 +1,30 @@
+.demo2.u-tree {
+  li a.u-tree-node-content-wrapper:hover::before {
+    background: rgb(235, 236, 240);
+  }
+  li a.u-tree-node-content-wrapper.u-tree-node-selected {
+    color: rgb(245, 60, 50);
+    .u-tree-title{
+        color: rgb(245, 60, 50);
+    }
+    background: transparent;
+    &::before {
+      background: rgb(235, 236, 240);
+    }
+  }
+
+  li a.u-tree-node-content-wrapper::before {
+    position: absolute;
+    right: 0;
+    left: 0;
+    height: 20px;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    content: "";
+  }
+
+  li  span {
+    position: relative;
+    z-index: 1;
+  }
+}

dist/demo.css

@@ -5451,6 +5451,10 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
     list-style: none;
     white-space: nowrap;
     outline: 0; }
+    .u-tree li:first-child {
+      padding-top: 8px; }
+    .u-tree li:last-child {
+      padding-bottom: 0; }
   .u-tree li a[draggable],
   .u-tree li a[draggable="true"] {
     -webkit-user-select: none;
@@ -5476,14 +5480,16 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
     padding: 0 0 0 18px; }
   .u-tree li a {
     display: inline-block;
-    padding: 1px 5px;
+    padding: 0px 5px;
     border-radius: 2px;
     margin: 0;
     cursor: pointer;
     text-decoration: none;
-    vertical-align: top;
+    vertical-align: middle;
     color: #666;
     transition: all 0.3s ease; }
+    .u-tree li a.u-tree-node-content-wrapper {
+      width: calc(100% - 18px); }
   .u-tree li a:hover {
     background-color: rgb(235, 236, 240); }
   .u-tree li a.u-tree-node-selected {
@@ -6789,6 +6795,29 @@ input.u-button[type="submit"] {
     right: 7px;
     color: rgba(0, 0, 0, 0.65); }
 
+.demo2.u-tree li a.u-tree-node-content-wrapper:hover::before {
+  background: #ebecf0; }
+
+.demo2.u-tree li a.u-tree-node-content-wrapper.u-tree-node-selected {
+  color: #f53c32;
+  background: transparent; }
+  .demo2.u-tree li a.u-tree-node-content-wrapper.u-tree-node-selected .u-tree-title {
+    color: #f53c32; }
+  .demo2.u-tree li a.u-tree-node-content-wrapper.u-tree-node-selected::before {
+    background: #ebecf0; }
+
+.demo2.u-tree li a.u-tree-node-content-wrapper::before {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 20px;
+  transition: all 0.3s;
+  content: ""; }
+
+.demo2.u-tree li span {
+  position: relative;
+  z-index: 1; }
+
 .u-tree-searchable-filter {
   color: #f50;
   transition: all .3s ease; }

src/Tree.scss

@@ -111,6 +111,12 @@ $treePrefixCls : "u-tree";
     list-style: none;
     white-space: nowrap;
     outline: 0;
+    &:first-child {
+      padding-top: 8px;
+    }
+    &:last-child {
+      padding-bottom: 0;
+  }
   }
   li a[draggable],
   li a[draggable="true"] {
@@ -143,16 +149,19 @@ $treePrefixCls : "u-tree";
   }
   li a {
     display: inline-block;
-    padding: 1px 5px;
+    padding: 0px 5px;
     border-radius: 2px;
     margin: 0;
     cursor: pointer;
     text-decoration: none;
-    vertical-align: top;
+    vertical-align: middle;
     color: #666;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
-    // outline: 5px #cfe8fb;
+    // a 标签hover宽度调整
+   &.u-tree-node-content-wrapper {
+      width: calc(100% - 18px);
+    }
    
   }
   li a:hover {

src/TreeNode.js

@@ -489,10 +489,10 @@ class TreeNode extends React.Component {
       }
       return <span className={classNames(cls)}></span>;
     };
-
+    const selectedCls =  props.selected?`${prefixCls}-treenode-selected`:'';
     return (
       <li {...liProps} ref="li" style={props.style}
-        className={classNames(props.className, disabledCls, dragOverCls, filterCls) }
+        className={classNames(props.className, disabledCls, dragOverCls, filterCls,selectedCls) }
       >
         {canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher()}
         {props.checkable ? this.renderCheckbox(props) : null}