如何在没有/deep/的情况下覆盖`ng-template`构建字段的css样式？

问题描述

我有一些使用 ng-template 的组件的问题。如果我使用的组件生成了一些我不想要的元素或包含错误的东西，我会寻找解决方法。理想情况下我不应该这样做，但是一旦这些依赖库出现问题，我就不得不这样做。以前使用 popver 遇到类似问题，现在使用 ngx-datatable。如果您能告诉我我需要遵循的更好的做法，我将不胜感激。

即这里对于 ngx-datatabler-row-detail 模板，我得到一个带有 div 的输出，它具有 .datatable-row-detail 类。如果我不使用 /deep/ 覆盖它（我听说已弃用），即使 !important 也无法覆盖宽度。我如何为角度组件中生成的字段覆盖这些类样式，因为无法给它们一个 id ？

/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>

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

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

解决方法

我认为不可能以干净的方式覆盖来自 Angular 组件的第三方组件样式。 （有一些选项，例如使用已弃用的 deep 或关闭 ViewEncapsulation。）

但是，可以从应用根目录中的全局 styles.scss 覆盖它们。如果我们把下面的样式放进去，就可以了：

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

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

堆叠闪电战： https://stackblitz.com/edit/ngx-datatable-row-detail-mj3otr?file=styles.css