嘿，我来帮你搞定Taiga UI分页组件的颜色修改问题～针对v4.59版本，有几种靠谱的方法，你可以根据需求选择：

方法一：利用官方提供的CSS变量（推荐） #

Taiga UI组件内置了一系列CSS变量，直接修改这些变量就能轻松定制颜色，而且完全符合组件的设计逻辑，不会破坏原有结构。在你的组件样式文件（比如your-component.component.scss）里添加：

:host {
  /* 选中页码的主背景色 */
  --tui-primary: #2563eb;
  /* 选中页码的文字颜色 */
  --tui-text-on-primary: #ffffff;
  /* 未选中页码的文字颜色 */
  --tui-text-primary: #4b5563;
  /* 页码hover时的背景色（未选中状态） */
  --tui-hover-bg: #dbeafe;
  /* 禁用状态的页码文字颜色 */
  --tui-text-disabled: #9ca3af;
}

提示：你可以打开浏览器F12调试工具，查看分页元素的CSS样式，找到更多可定制的内置变量哦～

方法二：样式穿透覆盖默认类（细粒度定制） #

如果CSS变量满足不了你的精准需求（比如要修改页码边框、特定状态的间距等），可以用::ng-deep配合:host来限定作用域，避免影响全局组件：

:host ::ng-deep .tui-pagination__item {
  /* 未选中页码的文字颜色 */
  color: #4b5563;
  /* 未选中页码的边框样式 */
  border: 1px solid #e5e7eb;
}

:host ::ng-deep .tui-pagination__item.tui-is-selected {
  /* 选中页码的背景+文字色 */
  background-color: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

:host ::ng-deep .tui-pagination__item:hover:not(.tui-is-selected) {
  /* hover时的背景色（排除选中状态） */
  background-color: #f3f4f6;
}

:host ::ng-deep .tui-pagination__item:disabled {
  /* 禁用状态的样式 */
  color: #d1d5db;
  border-color: #e5e7eb;
}

方法三：全局修改（全项目分页组件生效） #

如果你想让整个项目的所有分页组件都用这套定制颜色，可以在项目根目录的styles.scss（或styles.css）里直接写样式，不用加:host和::ng-deep：

.tui-pagination__item.tui-is-selected {
  background-color: #2563eb;
  color: #ffffff;
}

.tui-pagination__item:hover:not(.tui-is-selected) {
  background-color: #dbeafe;
}

注意：全局修改要谨慎，确保不会影响其他不需要定制的组件样式～

小提醒 #

• 如果你用的是纯CSS（而非SCSS），写法类似，变量定义直接写在:host选择器里即可，比如：

:host {
  --tui-primary: #2563eb;
  --tui-text-on-primary: #ffffff;
}

• 如果修改后样式没生效，试着重启Angular服务，有时候缓存会导致样式不更新。

这样应该就能完美定制你想要的分页颜色啦～有其他细节问题随时问我！