如何删除节点的突出显示颜色

Question

我有一个 PrimeNg 树 (Angular 2)，我想删除选中的节点高亮颜色。

根据图像我想删除蓝色高亮颜色。

相反，我想要这种风格：Style I want

这是我的风格：

.ui-tree {
  width: 100%;
}

body .ui-widget-content {
  border: none !important;
}

span.ui-treenode-label {
  font-family: Poppins !important;
  line-height: 24px !important;
  font-size: 14px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

span.ui-treenode-icon {
  line-height: 24px !important;
  font-size: 1.2rem !important;
}

.ui-tree .ui-chkbox .ui-chkbox-icon {
  margin-left: 0px;
}

.ui-tree .ui-treenode-children {
  padding-left: 20px !important;
}

.hidden-tree-node {
  display: none;
}

.ui-state-highlight .ui-widget-content {
  color: white;
}

Answer 1

您可以通过设置覆盖原来的样式：

span.ui-state-highlight {
    background-color: transparent !important;
    color: inherit !important;
}

Answer 2

几个解决方案：

1) 使用 ng-deep

::ng-deep {
  span.ui-state-highlight {
    background-color: transparent;
    color: inherit;
  }
}

2)以更具体的方式定位元素

span.ui-treenode-label.ui-corner-all.ui-state-highlight {
   background-color: transparent;
   color: inherit;
}

另外，尝试使用SASS。它将使您的 CSS 更具可读性和更智能。你会喜欢的。顺便说一句，您应该从代码中删除重要性。使用 importants 不是好的做法。

如何删除节点的突出显示颜色

How can I delete the highlight color for nodes

css

primeng