Angular 15 Material：如何修改mat-paginator前后按钮颜色

针对你遇到的mat-paginator按钮样式无法生效的问题，提供以下几种可行的解决方法：

方法一：使用::ng-deep结合精准选择器（推荐局部修改） #

利用::ng-deep穿透Angular的视图封装，同时通过组件ID限定范围，避免影响其他分页组件，提升选择器优先级：

/* 修改按钮背景色 */
::ng-deep #paginator .mat-paginator-navigation-previous,
::ng-deep #paginator .mat-paginator-navigation-next {
  background-color: red;
  border-radius: 4px; /* 可选：调整按钮圆角 */
}

/* 修改按钮内部图标颜色 */
::ng-deep #paginator .mat-paginator-navigation-previous .mat-icon,
::ng-deep #paginator .mat-paginator-navigation-next .mat-icon {
  color: white;
}

/* 禁用状态下的按钮样式 */
::ng-deep #paginator .mat-paginator-navigation-previous[disabled],
::ng-deep #paginator .mat-paginator-navigation-next[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}

方法二：关闭组件视图封装（适合局部全局样式） #

通过关闭当前组件的视图封装，让组件内的CSS直接作用到子组件，注意需用ID或类限定范围避免全局污染：

1. 在组件TS文件中修改封装模式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {
  // 组件逻辑代码
}

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

#paginator .mat-paginator-navigation-previous,
#paginator .mat-paginator-navigation-next {
  background-color: red;
}

#paginator .mat-paginator-navigation-previous .mat-icon,
#paginator .mat-paginator-navigation-next .mat-icon {
  color: white;
}

方法三：通过自定义Material主题修改（全局统一样式） #

如果需要全局修改所有mat-paginator的样式，推荐使用Angular Material的主题定制方案，在全局样式文件styles.scss中编写：

@use '@angular/material' as mat;

/* 全局修改分页导航按钮样式 */
.mat-paginator {
  .mat-paginator-navigation-previous,
  .mat-paginator-navigation-next {
    background-color: red;
    
    .mat-icon {
      color: white;
    }
  }

  /* 禁用状态样式 */
  .mat-paginator-navigation-previous[disabled],
  .mat-paginator-navigation-next[disabled] {
    background-color: #e0e0e0;
  }
}

你之前尝试失效的原因说明： #

• 选择器优先级不足：未结合组件ID或类进行限定，导致样式被默认主题覆盖
• 未精准定位到图标元素：如果要修改箭头颜色，需要选中按钮内部的.mat-icon子元素
• 部分场景下!important可能因Angular样式优先级机制未生效，通过精准选择器可替代!important

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