html - 如何去除 Mat 树分支线的额外边框？

Question

[！[如何从垫子树中删除标记的额外边框？

.tree-nested-node {
      padding-left: 30px;
    }

    .mat-tree {
      margin-left: 40px;
    }
    .mat-tree-node {
      padding: 0;
      background-color: white;
    }

    .mat-nested {
      top: -24px;
    }

    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li.tree-container {
      border-bottom: 0;
    }

    ul {
      padding-left: 40px;
    }

    li {
      padding-left: 40px;
      border: 2px solid #c3cbd7;
      border-width: 0 0 2px 2px;
      position: relative;
      top: -24px;
    }

    li.mat-tree-node,
    li div {
      margin: 0;
      position: relative;
      top: 24px;
    }

    li ul {
      border-top: 2px solid #c3cbd7;
      margin-left: -40px;
      padding-left: 60px;
    }

    .mat-nested:last-child ul {
      border-left: 1px solid white;
      margin-left: -41px;
    }

    .mat-icon-button {
      z-index: 100;
    }

Here is the HTML part
<mat-tree class="mat-tree" [dataSource]="dataSource" [treeControl]="treeControl">
                <mat-nested-tree-node class="mat-nested" *matTreeNodeDef="let node">
                  <li>
                    <div class="mat-tree-node colored__locobuzz ">  +&nbsp;{{node.item}}</div>
                  </li>
                </mat-nested-tree-node>
                <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
                <li class="tree-container">
                  <div class="mat-tree-node">
                    <button mat-icon-button matTreeNodeToggle
                            [matTreeNodeToggleRecursive]="recursive"
                          [attr.aria-label]="'toggle ' + node.filename">
                      <mat-icon class="material-icons-outlined">
                        {{treeControl.isExpanded(node) ? 'add_box' : 'add_box'}}
                      </mat-icon>
                    </button>
                    <span class="treeItem" mat-button (click)="drawer.toggle()">{{node.item}}</span>
                </div>
                <ul class="tree-nested-node">
                  <div  *ngIf="treeControl.isExpanded(node)">
                  <ng-container matTreeNodeOutlet></ng-container>
                  </div>
                </ul>
              </li>
              
              </mat-nested-tree-node>
              </mat-tree>

] 2 ] 2

标签： htmlcssangularangular-material