不能使用带有 ng deep 的主机来设计 Angular Material Paginator 的样式吗？

Question

所以我有一个 Angular Material Paginator，它看起来像这样：

这就是我在 html 中使用它的方式：

<div class="paginator-container">
  <mat-paginator
    #paginator
    [length]="dokumente.length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="getPaginatorData($event)"
  >
  </mat-paginator>
</div>

这是我的 css 来设置垫子选项的样式：

//this works, but will affect other components 
::ng-deep .mat-option {
  color: black !important;
}

我尝试在这里使用主机，但奇怪的是它没有效果：

//this does not work
:host ::ng-deep .mat-option {
  color: black !important;
}

我尝试从 mat paginator 中设置子元素的样式，如下所示：

//this does not work
::ng-deep .mat-paginator .mat-option {
  color: black !important;
}

此外，当我查看我的开发控制台时，我注意到 mat-option 不在 mat-paginator 内或我的组件内。 就像，我无法缩小它属于我的组件的范围：

为什么我的房东不在这里工作？ 以及如何在不为项目中的其他垫子选项设置样式的情况下专门设置该垫子选项的样式？

Answer 1

没有可帮助识别 cdkoverlay 元素的可用属性。

在任何给定时间 DOM 上应该只有一个 cdkoverlay 可用，假设您可以将 class 附加到 mat-select-panel-wrap 元素并应用您的 styles，这是一种 hacky 方法，但它应该可以工作

constructor(private renderer: Renderer2){}

paginatorClicked(){
  this.renderer.addClass(document.getElementsByClassName('mat-select-panel-wrap')[0], 'black-color')
}

<div class="paginator-container">
  <mat-paginator
    #paginator
    [length]="dokumente.length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="getPaginatorData($event)"
    (click)="paginatorClicked()"
  >
  </mat-paginator>
</div>

在您的 styles 文件中添加这些规则

.black-color .mat-option {
  color: black !important;
}