如何在Angular中通过Core UI Smart Table修改分页按钮颜色？

组件内样式修改（用深度选择器） #

在对应组件的样式文件（.component.scss/.component.css）中添加以下代码，穿透组件封装覆盖默认样式：

::ng-deep .c-pagination .page-item .page-link {
  background-color: #自定义背景色;
  border-color: #自定义边框色;
  color: #自定义文字色;
}

// 激活状态的分页按钮
::ng-deep .c-pagination .page-item.active .page-link {
  background-color: #激活态背景色;
  border-color: #激活态边框色;
}

// 禁用状态的分页按钮
::ng-deep .c-pagination .page-item.disabled .page-link {
  background-color: #禁用态背景色;
  color: #禁用态文字色;
}

全局样式修改 #

如果不想使用::ng-deep，可以在项目根目录的styles.scss（或全局样式文件）中直接写入样式，无需穿透：

.c-pagination .page-item .page-link {
  background-color: #自定义背景色;
  border-color: #自定义边框色;
  color: #自定义文字色;
}

.c-pagination .page-item.active .page-link {
  background-color: #激活态背景色;
  border-color: #激活态边框色;
}

关键提示 #

• 先通过浏览器开发者工具（F12）查看分页按钮的实际DOM类名，确认Core UI生成的结构，避免选择器匹配错误
• 若使用SCSS，可定义颜色变量统一管理，提升维护性

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