如何修改mat-paginator下拉菜单的背景颜色？

你的CSS未生效，大概率是选择器优先级不足或Angular Material版本对应的类名不匹配，以下是针对性解决方法：

一、针对传统非MDC版本的Angular Material（Angular 14及以下） #

结合你添加的table-paginator类，使用更精准的选择器提高优先级：

/* 修改下拉面板的整体背景色 */
::ng-deep .table-paginator .mat-select-panel {
  background-color: #f5f5f5 !important; /* 替换为你需要的颜色 */
}

/* 修改选中选项的背景色 */
::ng-deep .table-paginator .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
  background-color: #02a10e !important;
}

/* 可选：修改选项hover时的背景色 */
::ng-deep .table-paginator .mat-select-panel .mat-option:hover:not(.mat-option-disabled) {
  background-color: #e8f5e9 !important;
}

二、针对MDC版本的Angular Material（Angular 15及以上） #

Angular 15+的Material组件改用MDC架构，类名前缀变为mat-mdc-，需调整选择器：

/* 修改下拉面板的整体背景色 */
::ng-deep .table-paginator .mat-mdc-select-panel {
  background-color: #f5f5f5 !important;
}

/* 修改选中选项的背景色 */
::ng-deep .table-paginator .mat-mdc-select-panel .mdc-list-item--selected {
  background-color: #02a10e !important;
}

/* 可选：修改选项hover时的背景色 */
::ng-deep .table-paginator .mat-mdc-select-panel .mdc-list-item:hover:not(.mdc-list-item--disabled) {
  background-color: #e8f5e9 !important;
}

三、替代方案：关闭组件视图封装 #

如果不想使用::ng-deep，可以在组件装饰器中关闭视图封装：

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

@Component({
  // ...其他配置
  encapsulation: ViewEncapsulation.None
})
export class YourComponent {
  // ...组件逻辑
}

此时直接编写CSS即可，无需::ng-deep：

.table-paginator .mat-select-panel {
  background-color: #f5f5f5;
}

注意：关闭视图封装后，组件内的CSS会全局生效，需确保类名足够唯一避免样式污染。

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