如何正确覆盖 Angular 树的样式？答案

【问题标题】：How to properly override style of Angular tree?如何正确覆盖 Angular 树的样式？
【发布时间】：2019-04-12 02:03:40
【问题描述】：

我正在尝试将ACE Admin theme 样式应用于angular-tree-component。

现在我的树看起来像这样：

但是，我想应用来自 the guide 的样式来制作这样的树：

所以可以通过The Angular tree guide来实现。 Angular 树指南说，如果你想用加号和减号（ACE Admin theme）制作一棵树，那么：

用一个类围绕你的树，并将你的自定义样式添加到你的样式.scss 文件。将所有自定义规则限定在您的自定义类下 - 就是这样！

所以我创建了.ace 风格（Surround your tree with a class 就像指南所说的那样）：

.ace { }

然后我将所有样式 ACE Admin theme 的元素放在 .ace 类中（Scope all the custom rules under your custom class 如指南所说）：

.ace div.tree {
     padding-left: 0;
     margin-left: -5px
}
...

还有我的树：

 <tree-root 
  [ngClass]="'ace'"
  [nodes]="nodes"
  [options]="options"
></tree-root>

我认为它应该很简单，但是我不能应用Ace Admin Style。很抱歉缺乏基本的 CSS 理解。

我创建了a plunker to show what I have。应用了基本样式，但不应用ACE Admin theme。

我做错了什么？

【问题讨论】：

你把你的 CSS 放在哪里了（例如：.ace div.tree 部分）？在浏览器中加载时，我会尝试查看页面并查看您的自定义 div.tree 在哪里。如果它不存在，则不会加载您的自定义 CSS。如果它在那里，看看是否添加了一些东西（即：ng-content 的东西）。如果你看到 ng-content 的东西，这意味着你没有把你的 CSS 放在一个全局文件中，所以 Angular 正在做encapsulation
当我查看您的 plnkr 时，我发现您的样式实际上适用于标记。您可以通过删除<link rel="stylesheet" href="style.css" /> 行来检查。我认为.ace div.tree 不适用于任何事情。当我检查 DOM 时，我没有看到任何带有 .tree 类的元素。
@Kevin 我已将.ace div .tree 部分放入styles.css 文件中。 Ace Admin Style 在创建类 .ace {} 后开始。请看我的笨蛋。 plnkr.co/edit/azLsD1?p=preview
@BunyaminCoskuner 所以你的意思是我错误地覆盖了风格？我能做些什么？提前致谢。
您可以通过文档或查看渲染的 DOM 本身找出需要定位的类

标签： javascript html css angular treeview

【解决方案1】：

需要将类expand-tree添加到所有树并添加特定样式div.angular-tree-component。

Click to see a work example at plunker.

整个样式是这样的：

.expand-tree .tree-children.tree-children-no-padding { padding-left: 0 }
.expand-tree .tree-children { padding-left: 20px; overflow: hidden }
.expand-tree .node-drop-slot { display: block; height: 2px }
.expand-tree .node-drop-slot.is-dragging-over { background: #ddffee; height: 20px; border: 2px dotted #888; }
.expand-tree .toggle-children-wrapper-expanded .toggle-children { transform: rotate(90deg) }
.expand-tree .toggle-children-wrapper-collapsed .toggle-children { transform: rotate(0); }
.expand-tree .toggle-children-wrapper {
  padding: 2px 3px 5px 1px;
}
/* tslint:disable */
.expand-tree .toggle-children {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzRkRFQjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRkRFQjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5iogFwAAAGhJREFUeNpiYGBgKABigf///zOQg0EARH4A4gZyDIIZ8B/JoAJKDIDhB0CcQIkBRBtEyABkgxwoMQCGD6AbRKoBGAYxQgXIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC');
  height: 8px;
  width: 9px;
  background-size: contain;
  display: inline-block;
  position: relative;
  top: 1px;
  background-repeat: no-repeat;
  background-position: center;
}
.expand-tree .toggle-children-placeholder {
  display: inline-block;
  height: 10px;
  width: 10px;
  position: relative;
  top: 1px;
  padding-right: 3px;
}
.expand-tree .node-content-wrapper {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 2px;
  transition: background-color .15s,box-shadow .15s;
}
.expand-tree .node-wrapper {display: flex; align-items: flex-start;}
.expand-tree .node-content-wrapper-active,
.expand-tree .node-content-wrapper.node-content-wrapper-active:hover,
.expand-tree .node-content-wrapper-active.node-content-wrapper-focused {
  background: #beebff;
}
.expand-tree .node-content-wrapper-focused { background: #e7f4f9 }
.expand-tree .node-content-wrapper:hover { background: #f7fbff }
.expand-tree .node-content-wrapper-active, .node-content-wrapper-focused, .node-content-wrapper:hover {
  box-shadow: inset 0 0 1px #999;
}
.expand-tree .node-content-wrapper.is-dragging-over { background: #ddffee; box-shadow: inset 0 0 1px #999; }
.expand-tree .node-content-wrapper.is-dragging-over-disabled { opacity: 0.5 }

.expand-tree tree-viewport {
  height: 100%;
  overflow: auto;
  display: block;
}
.expand-tree .tree-children { padding-left: 20px }
.expand-tree .empty-tree-drop-slot .node-drop-slot { height: 20px; min-width: 100px }
.expand-tree .angular-tree-component {
  width: 100%;
  position:relative;
  display: inline-block;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently not supported by any browser */
}

tree-root .angular-tree-component-rtl {
  direction: rtl;
}
tree-root .angular-tree-component-rtl .toggle-children-wrapper-collapsed .toggle-children {
  transform: rotate(180deg) !important;
}
tree-root .angular-tree-component-rtl .tree-children {
  padding-right: 20px;
  padding-left: 0;
}

li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

.expand-tree div.angular-tree-component div.tree-children::before,
.expand-tree div.angular-tree-component::before {
  content: "";
  position: absolute;
  border-left: 1px dotted #23527c;
  height: 100%;
  top: -10px;
  left: 6px
}

.expand-tree div.angular-tree-component {
  padding: 0;
  margin: 0;
}

.expand-tree div.angular-tree-component div.tree-children {
  position: relative;
  padding-left: 0;
  margin-left: 16px
}

.expand-tree div.angular-tree-component div.tree-children::before {
  left: 5px
}

.expand-tree .node-drop-slot {height:2px;}

.expand-tree div.angular-tree-component tree-node>div>.node-wrapper {
  margin-left: 24px
}

.expand-tree div.angular-tree-component tree-node>div>.node-wrapper>.node-content-wrapper {
  margin-left: 4px
}

.expand-tree div.angular-tree-component tree-node>div.tree-node-leaf .node-wrapper {
  margin-left: 0;
  position: relative;
}

.expand-tree div.angular-tree-component tree-node>div::before {
  content: "";
  position: absolute;
  border-bottom: 1px dotted #23527c;
  width: 7px;
  margin-top: 12px;
  left: 6px
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper {
  width: 13px;
  height: 13px;
  border: 1px solid #23527c;
  position: relative;
  margin-top: 5px;
  margin-left: 14px;
  display: inline-block;
  background-color: #fff;
  z-index: 1
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper::before {
  content: "";
  display: inline-block;
  width: 7px;
  border-top: 1px solid #23527c;
  position: absolute;
  top: 5px;
  left: 2px
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
  content: "";
  display: inline-block;
  height: 7px;
  border-left: 1px solid #23527c;
  position: absolute;
  top: 2px;
  left: 5px
}

.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper .toggle-children {
  display: none
}

.expand-tree div.angular-tree-component tree-node>div .node-content-wrapper {
  margin: 0;
  padding: 0 0 0 4px;
  box-shadow: none;
  background: none;
}

.expand-tree div.angular-tree-component>tree-node>div::before {
  left: 14px
}

和树根：

<tree-root 
  [ngClass]="expand-tree"
  [nodes]="nodes"
  [options]="options"
></tree-root>

【讨论】：

它应该是[ngClass]="'expand-tree'"，单引号内有双引号，但这仍然不允许您自定义树形视口