Trouble Styling Nodes

I’m using this for a simple dynamic tree that the user can add and subtract nodes from and I’ve been trying to create my own custom styling, but it doesn’t seem to be overriding any of the other styles. I’ve tried adding classes to the selector as well, but it doesn’t seem to work.

CSS #mytree{ background-color: red!important; }

HTML in Component

<tree-root id="mytree" [nodes]="nodes" [options]="options">
    <template #treeNodeTemplate let-node="node" let-index="index">
        ...html content...
    </template>
</tree-root>

I’m linking it to my component via the styleUrls. My goal is to color code the background color of some of the nodes.

[gRoussac]

@Hesesses, did you wrap you css into a deep rule ? Because I believe styling is on sub components right ?

#{$deep} {
  .tree-node {
...
    .node-content-wrapper {
...
    }
  }
}

Regards

[dojchek]

@Edge1039 I needed the same the other day, here’s how it can be done:

<template #treeNodeTemplate let-node="node">
    <div [ngClass]="getNodeClass(node)">
        { node.data.name }}
    </div>
</template>

Then, you can put any kind of styling logic in getNodeClass(node) method, like this for example:

getNodeClass(node: ITreeNode): string {
    if (node.data.disabled) {
      return 'tree-node tree-node-disabled';
    }
    return 'tree-node';
}

In the end, you just have to define your styles - Here’s my scss:

.tree-node{
    color: darken($text-color, 20);
}
.tree-node.tree-node-disabled {
    color: lighten($text-color, 20);
}