如何修改选中选项时mat-paginator的底部边框颜色？

方法一：组件内用深度选择器穿透样式 #

因为Angular组件有样式封装机制，直接在组件样式文件里写的CSS无法作用到Mat-Paginator内部元素，需要用::ng-deep突破封装。在组件的.component.scss文件中添加代码：

/* 针对页面大小选择器选中时的底部边框 */
::ng-deep .mat-mdc-paginator-page-size-label + .mat-mdc-select .mat-mdc-select-trigger:focus .mat-mdc-select-value {
  border-bottom-color: #你的目标颜色; /* 比如替换成#2196F3 */
}

/* 如果是页码按钮选中时的边框（按需添加） */
::ng-deep .mat-mdc-paginator-page.mat-mdc-button-base:focus {
  outline-color: #你的目标颜色;
  /* 若存在底部边框，替换为border-bottom-color属性 */
}

方法二：全局样式文件中修改 #

在项目根目录的styles.scss（或styles.css）中添加样式，无需::ng-deep，样式会全局生效：

/* 页面大小选择器选中状态的底部边框 */
.mat-mdc-paginator-page-size-label + .mat-mdc-select .mat-mdc-select-trigger:focus .mat-mdc-select-value {
  border-bottom-color: #你的目标颜色;
}

精准定位样式类的技巧 #

如果找不到对应样式类，按以下操作：

1. 打开浏览器开发者工具（F12），切换到Elements面板
2. 点击左上角的选择元素按钮，选中Mat-Paginator的下拉选项或页码按钮
3. 在面板右侧Styles区域，点击:hov按钮并勾选focus状态，就能看到选中时生效的CSS类和属性
4. 复制对应的选择器，修改颜色属性即可

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