如何覆盖“ng-template”构建字段的css syle而不使用/deep/？

Question

我对使用ng-template的一些组件有一个问题。如果我使用的组件生成了一些我不想要的元素或者包含了一个有缺陷的东西，我就会寻找解决方法。理想情况下，我不应该这样做，但一旦这些依赖库出现了一些问题，我就不得不这样做了。以前的popver和现在的NGX-DataTable都面临类似的问题。如果你能告诉我我需要遵循的更好的练习，我很感激。

例如，对于ngx-dataTabler-row-detail模板，我得到了一个带有div的输出，它具有.dataTable-row-detail类。如果我不使用/deep/重写它（我听说这是不推荐的），那么即使！importity也无法重写宽度。我如何为angular组件中生成的字段覆盖这些类样式，因为没有办法给它们一个ID？

null

/deep/
.datatable-body-row{
  border-bottom:1px solid #000;
}

/deep/
.datatable-row-detail{
  width:600px !important;
}

   <!-- Row Detail Template -->
    <ngx-datatable-row-detail [rowHeight]="120"  #myDetailRow (toggle)="onDetailToggle($event)">
      <ng-template
       ...>
        <div style="padding-left:35px" >
          <div><strong>==== Details ===</strong></div>
            <li *ngFor="let detail of row.details">
              {{detail }}
            </li>

        </div>
      </ng-template>
    </ngx-datatable-row-detail>

    <ngx-datatable-column>
    <ng-template
      ...>
      <a
    (click)="toggleExpandRow(row)"> <i class="fa fa-cube btn-link" hover-class="active"></i>
      </a>
    </ng-template>
  </ngx-datatable-column>

null

请看这个Stackblits。只需从css中删除/deep/，当您单击Open时，您将不再看到背景。

https://stackblitz.com/edit/ngx-datatable-row-detail-omuywi？file=app/app.component.css

Answer 1

一个快速而简单的方法是在ng模板中设置一个div,在该div中分配您的类：

<ng-template let-row="row" ngx-datatable-cell-template>
    <div class='row-detail'>
        <span>
            {{ row?.gruppen[i]['menge']}}  
        </span>
    </div>

CSS：

row-detail {
  background: rgb(134, 79, 79) !important;
}

Answer 2

我认为不可能以干净的方式从Angular组件重写第三方组件样式。（可以选择使用不推荐使用的deep或关闭viewencapsulation。）

但是，可以从应用程序根目录中的全局styles.scss重写它们。如果我们将以下样式放入其中，它就起作用了：

.datatable-body-row {
  border-bottom: 1px solid #000;
}

.datatable-row-detail {
  background: rgb(134, 79, 79) !important;
}

stackblitz:https://stackblitz.com/edit/ngx-datatable-row-detail-mj3otr？file=styles.css