如何修复Mat-Pagination标签渲染在屏幕左下角的问题？

问题描述 #

使用Angular Material的<mat-paginator>组件时，出现以下异常：

• 悬停分页导航按钮（如“下一页”“最后一页”）时，对应的操作标签错误渲染在屏幕左下角
• 选择每页条目数后，“Items per page: X”类的标签同样出现在屏幕左下角，样式脱离正常悬浮提示位置

使用的分页器代码如下：

<mat-paginator 
  [pageSizeOptions]="[5, 10, 20, 50, 100]"
  [pageSize]="10"
  showFirstLastButtons
  aria-label="Select page of vulnerable software">
</mat-paginator>

原因分析 #

1. 核心原因：未正确加载Angular Material主题样式
   Angular Material组件（包括tooltip提示）依赖内置主题样式控制定位与视觉表现，若未引入主题样式或样式加载顺序靠后，会导致tooltip默认定位逻辑失效，出现标签位置异常。
2. 全局样式冲突
   项目全局样式若对body、通用容器或tooltip相关元素设置了强制position、left、top或transform属性，会干扰Material组件的内置样式规则。

解决方法 #

1. 确保正确引入Material主题样式 #

在项目全局样式文件（通常为styles.scss或styles.css）中，引入Angular Material预构建主题，示例：

// 可替换为其他预构建主题，如deeppurple-amber.css、pink-bluegrey.css等
@import '@angular/material/prebuilt-themes/indigo-pink.css';

若使用自定义主题，需保证主题样式代码位于所有自定义全局样式之前，避免被覆盖。

2. 排查并修复全局样式冲突 #

检查全局样式中是否存在以下干扰规则：

• 对body设置position: relative或overflow: hidden
• 对所有div或.mat-tooltip类设置强制定位属性
  移除或调整这类规则，或为Material组件样式添加更高优先级选择器（如配合组件所在容器类名）。

3. 验证模块导入完整性 #

确保使用<mat-paginator>的模块中，同时导入MatPaginatorModule和MatTooltipModule（分页器提示功能依赖tooltip模块）：

import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    // 其他必要模块
    MatPaginatorModule,
    MatTooltipModule
  ]
})
export class YourFeatureModule { }

4. 兜底样式修复 #

若以上步骤无效，可在全局样式中添加针对性样式重置，强制修正tooltip定位：

.mat-tooltip {
  position: absolute !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
}

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