Angular 16中修改ngx-pagination默认蓝色样式求助

你在Angular 16项目中尝试修改ngx-pagination的默认蓝色样式，但自定义CSS未生效，以下是问题原因和解决方案：

问题代码 #

HTML代码 #

<div>
  <pagination-controls></pagination-controls>                       
</div>

原CSS代码（未生效） #

.ngx-pagination .current{
  color: #ffffff !important;
  background-color: red !important;
}

原因分析 #

Angular默认启用组件样式隔离（ViewEncapsulation.Emulated），组件内的CSS只会作用于当前组件的DOM元素，无法穿透到第三方组件（如ngx-pagination）的内部DOM结构，所以你的选择器无法命中目标元素。

解决方案 #

方案1：使用::ng-deep穿透样式 #

通过::ng-deep打破样式隔离，让自定义样式作用到ngx-pagination组件内部：

::ng-deep .ngx-pagination .current {
  color: #ffffff !important;
  background-color: red !important;
}

注意：虽然官方文档标记::ng-deep为过时特性，但目前在Angular 16中仍能正常使用，适合局部修改单个组件内的分页样式。

方案2：写入全局样式文件 #

如果需要全局统一修改分页样式，直接将CSS代码添加到项目根目录的styles.scss（或styles.css）中：

.ngx-pagination .current{
  color: #ffffff !important;
  background-color: red !important;
}

这种方式无需额外穿透，样式会作用于整个应用内的所有ngx-pagination组件。

方案3：关闭组件样式隔离（不推荐） #

在当前组件的装饰器中关闭样式隔离，不推荐使用，会导致组件样式全局生效，容易引发样式冲突：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent { }

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