如何修改ngx-datatable组件的滚动条样式？

样式失效通常是三个问题导致：Angular组件样式隔离、选择器指向错误、滚动条伪元素定义不完整，按以下步骤修改即可：

• 修正选择器指向：ngx-datatable的滚动区域是内部.datatable-body容器，而非外层.ngx-datatable容器，所以要将选择器指向该元素
• 处理Angular样式隔离：
  两种方案可选：
  1. 将滚动条样式代码直接写入项目根目录的全局样式文件（通常为styles.css或styles.scss），避开组件样式隔离
  2. 在当前组件的样式文件中使用::ng-deep穿透样式隔离，建议配合宿主选择器避免全局污染，示例：

  :host ::ng-deep .datatable-body::-webkit-scrollbar-track {
      border-radius: 8px !important;
  }
  

• 补全滚动条伪元素定义：仅定义scrollbar-track可能不生效，需要补全滚动条基础尺寸、滑块等相关定义，完整示例：

/* 滚动条整体尺寸 */
.datatable-body::-webkit-scrollbar {
  width: 8px; /* 纵向滚动条宽度 */
  height: 8px; /* 横向滚动条高度 */
}
/* 滚动条轨道 */
.datatable-body::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px !important;
}
/* 滚动条滑块 */
.datatable-body::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 8px;
}
/* 滚动条滑块hover状态 */
.datatable-body::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

• 兼容非webkit内核浏览器：如果需要适配火狐等浏览器，额外添加如下规则：

.datatable-body {
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}

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