更改树节点中图标的颜色

Question

正如您在我的 stackblitz 演示中看到的那样，我实现了一个带有复选框的树。现在，我想更改每个节点的圆圈颜色。例如，我想让文档的圆圈为红色，图片的圆圈为黑色，电影的圆圈为黄色。我该怎么做？

https://stackblitz.com/edit/primeng-treeselection-demo-ozpvr2?file=src/app/app.component.html

Answer 1

将这些样式应用到 styles.css，您将获得金奖：

.p-tree-container p-treenode .pi.pi-circle-on:before {
  color: black;
}

.p-tree-container > p-treenode:first-of-type .pi.pi-circle-on:before {
  color: red;
}

.p-tree-container > p-treenode:last-of-type .pi.pi-circle-on:before {
  color: yellow;
}

简单的 css 伪选择器。

你之所以把它放在 styles.css 而不是 app.component.css 是因为 app.component.css 不能改变嵌套组件的样式（好吧，无论如何都不容易）。将样式放入 styles.css 适用于整个应用程序。

已编辑 stackblitz：Stackblitz

更改树节点中图标的颜色

Changing colors of icons in tree node

primeng

angular