如何自定义Angular Material Sidenav滚动条样式？移除默认蓝色背景遇阻

方法1：组件内穿透样式（仅作用当前组件） #

在sidenav所在组件的CSS文件中添加以下代码：

::ng-deep .mat-drawer-inner-container::-webkit-scrollbar-track {
  /* 替换默认蓝色轨道背景，这里设为透明，也可改成你的主题色 */
  background-color: transparent;
}

::ng-deep .mat-drawer-inner-container::-webkit-scrollbar-thumb {
  /* 自定义滚动条滑块样式，避免默认蓝色 */
  background-color: #ccc;
  border-radius: 4px;
}

/* 可选：调整滚动条宽度 */
::ng-deep .mat-drawer-inner-container::-webkit-scrollbar {
  width: 6px;
}

方法2：全局样式修改（所有sidenav生效，推荐） #

在项目根目录的styles.css全局样式文件中添加代码：

.mat-drawer-inner-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.mat-drawer-inner-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.mat-drawer-inner-container::-webkit-scrollbar {
  width: 6px;
}

适配Firefox浏览器 #

如果需要兼容Firefox，补充以下代码：

.mat-drawer-inner-container {
  scrollbar-color: #ccc transparent; /* 滑块颜色 轨道颜色 */
  scrollbar-width: thin;
}

优先级问题处理 #

如果样式不生效，检查是否被默认样式覆盖。可尝试在属性后添加!important（优先通过调整选择器层级解决，尽量少用该方式）。

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