如何在Angular Material表中更改滚动条样式？

Question

更改Angular Material表中的滚动条样式的典型方法是以下哪种？ （我没有去检查元素时可以使用的任何样式属性。）

angular-table-issue

Answer 1

将mat-table标记放入类似的容器中：

<div class="container-list">
  <mat-table>
  ...
  </mat-table>
</div>

然后：

.container-list {
  overflow: auto;
  height: 100%;
}

.container-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.1);
}

.container-list::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background-color: black; // Put your color
}

.container-list::-webkit-scrollbar-button,
.container-list::-webkit-scrollbar-track,
.container-list::-webkit-scrollbar-track-piece,
.container-list::-webkit-scrollbar-corner,
.container-list::-webkit-resizer {
  display: none;
}