为何:host+::ng-deep无法为Angular Material分页器的mat-option设样式？

为什么:host ::ng-deep .mat-option无效？ #

Angular Material分页器的下拉选项（mat-option）是通过Angular CDK Overlay服务渲染的，这些元素会被挂载到全局DOM容器（通常是<body>的直接子元素），并不属于当前组件的DOM树结构。而:host的作用域仅限定于当前组件的宿主元素及其后代节点，当mat-option不在当前组件DOM范围内时，:host无法将样式作用域覆盖到它，因此样式不生效。

如何只为该分页器的mat-option设置专属样式？ #

可以通过给分页器的下拉面板添加自定义类，结合::ng-deep精准定位样式，步骤如下：

1. 修改分页器HTML代码，添加panelClass输入属性指定自定义类名：

<div class="paginator-container">
  <mat-paginator
    #paginator
    [length]="dokumente.length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="getPaginatorData($event)"
    [panelClass]="'custom-paginator-options'" <!-- 新增自定义面板类 -->
  >
  </mat-paginator>
</div>

2. 在组件样式文件中编写专属样式：

::ng-deep .custom-paginator-options .mat-option {
  /* 自定义样式示例 */
  color: #2d3748;
  padding: 8px 16px;
  font-size: 14px;
}

原理说明 #

panelClass是Angular Material分页器提供的输入属性，用于给Overlay创建的下拉面板容器添加自定义类名。面板容器带上这个类后，我们通过::ng-deep穿透样式隔离，就能只对该面板内的mat-option生效，不会影响其他组件的同类型元素。

内容的提问来源于stack exchange，提问作者IonicMan