Angular Material分页器样式疑问：:host ::ng-deep为何失效？

Angular Material分页器的下拉面板（对应.cdk-overlay-pane元素）是挂载到全局<body>节点下的，并非当前组件的DOM子树。:host用于限定当前组件宿主元素的样式作用域，而::ng-deep的穿透作用仅能覆盖宿主元素的后代DOM节点，无法作用于脱离当前组件DOM层级的全局挂载元素，所以:host ::ng-deep .cdk-overlay-pane无法选中目标元素。

方法一：通过panelClass给指定分页器的overlay加自定义类 #

这是最推荐的方案，精准且无副作用：

1. 在模板中给mat-paginator设置自定义面板类：

<mat-paginator [panelClass]="'custom-paginator-overlay'"></mat-paginator>

2. 在全局样式文件（如styles.scss）中添加样式：

.custom-paginator-overlay .cdk-overlay-pane {
  bottom: 73.7px !important;
}

该类只会作用于当前分页器的下拉面板，不会影响其他组件的.cdk-overlay-pane。

方法二：利用元素关联属性精准定位 #

每个分页器的overlay会通过aria-labelledby属性关联到分页器自身的ID，可通过该属性精准筛选：
在全局样式中写入：

.cdk-overlay-pane[aria-labelledby^="mat-paginator-"] {
  bottom: 73.7px !important;
}

如果需要更精准（仅针对当前组件内的分页器），可结合组件的宿主类：

.your-component-class + .cdk-overlay-container .cdk-overlay-pane[aria-labelledby^="mat-paginator-"] {
  bottom: 73.7px !important;
}

（将your-component-class替换为当前组件的宿主类名）

方法三：通过代码动态修改样式 #

在组件类中获取分页器实例，定位到对应的overlay元素后修改样式：

import { ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

export class YourComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  ngAfterViewInit(): void {
    // 获取分页器的下拉选择组件
    const pageSizeSelect = this.paginator._select;
    // 监听下拉面板打开事件
    pageSizeSelect.openedChange.subscribe(opened => {
      if (opened) {
        // 延迟执行确保overlay已渲染
        setTimeout(() => {
          const overlayElement = document.querySelector(`.cdk-overlay-pane[aria-labelledby="${pageSizeSelect.id}-label"]`);
          if (overlayElement) {
            (overlayElement as HTMLElement).style.bottom = '73.7px';
          }
        });
      }
    });
  }
}

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