如何自定义mat-paginator下拉选项的位置，使其位于选中项下方？

我刚好遇到过一模一样的需求，折腾了一阵找到几个靠谱的办法，既不用::ng-deep污染全局样式，又能精准控制这个分页器的下拉面板位置：

方案一：给MatPaginator内部的MatSelect动态添加panelClass #

MatPaginator本身没有panelClass属性，但它内部的分页大小选择器是个标准的MatSelect，我们可以通过Angular的视图查询找到这个MatSelect，然后给它设置自定义的面板类，再通过全局样式调整位置。

步骤1：在组件中获取分页器内的MatSelect #

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements AfterViewInit {
  @ViewChildren(MatSelect) matSelects!: QueryList<MatSelect>;
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  ngAfterViewInit(): void {
    // 筛选出属于当前分页器的MatSelect实例
    const paginatorSizeSelect = this.matSelects.find(select => {
      return select._elementRef.nativeElement.closest('mat-paginator') === this.paginator._elementRef.nativeElement;
    });

    if (paginatorSizeSelect) {
      // 给这个下拉选择器添加自定义面板类
      paginatorSizeSelect.panelClass = 'paginator-custom-panel';
    }
  }
}

步骤2：在全局样式文件中添加定位样式 #

打开你的styles.scss（或全局样式文件），添加针对这个自定义类的CSS：

.paginator-custom-panel {
  /* 让面板紧贴选中项下方 */
  transform: translateY(calc(100% + 2px)) !important;
  /* 对齐选中项的左侧 */
  left: 0 !important;
  margin-top: 0 !important;
}

这里的calc(100% + 2px)可以根据你的UI需求微调，2px是为了避免和选中项紧贴产生视觉重叠。

方案二：监听下拉打开事件，动态修改Overlay面板样式 #

如果不想依赖panelClass，也可以监听下拉的打开事件，找到对应的cdk-overlay-pane元素，直接给它加样式类：

组件代码 #

ngAfterViewInit(): void {
  const sizeSelectElement = this.paginator._elementRef.nativeElement.querySelector('mat-select');
  
  sizeSelectElement.addEventListener('opened', () => {
    // 找到当前打开的下拉面板（通过MatSelect的panelId关联）
    const panelId = sizeSelectElement.getAttribute('aria-controls');
    const overlayPane = document.querySelector(`#${panelId}.cdk-overlay-pane`);
    
    if (overlayPane) {
      overlayPane.classList.add('paginator-custom-panel');
    }
  });
}

同样配合方案一中的全局样式即可生效。

为什么不用::ng-deep？ #

::ng-deep会穿透组件样式隔离，容易意外修改其他MatSelect的下拉面板样式。而上面的方案都是精准定位到当前分页器的下拉组件，只给它添加自定义样式，不会影响其他组件。

注意：方案中用到的_elementRef属于Material的内部属性，虽然目前在大多数版本中稳定可用，但如果后续Material版本有大的结构变动，可能需要调整查询方式。不过对比::ng-deep的副作用，这种方式还是更安全的选择。

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