Angular 如何更改“角度材质选择”中的滚动条样式？

我们需要帮助更改“从角度材质选择组件”中的滚动条

实现了以下演示

但是，我需要帮助更改滚动条的宽度和样式

---

定制滚动条的方法通常是：

/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: red; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
}

---

您不能直接从dev工具中检查滚动条，但是如果您使用

滚动条检查具有
溢出
属性的div，您可以看到滚动条的样式其中的值
 我希望我没有迟到，我的本地滚动条也有类似的问题

我解决这个问题的方法是使用库，然后我会发出指令，并且只进行包装

 <mat-select placeholder="State">
    <div appSimpleBar>
       <mat-option>None</mat-option>
       <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
    </div>
  </mat-select>


没有一个
{{state}}

这将实现隐藏本机滚动条的技巧，因为当您使用Angular时，一个公共属性将在类似DOM的ng内容中呈现，这将覆盖用CSS编写的类属性，所以请尝试以下代码，这将消除应用程序中使用的本机Angular样式

转到组件

import {ViewEncapsulation} from '@angular/core';

然后

然后浏览器将采用您的样式。
更改颜色和宽度-

::-webkit-scrollbar {
    width: 4px;
    overflow-y: scroll;
    background: grey;
    box-shadow: inset 0 0 4px #707070;
}

::-webkit-scrollbar-thumb {
    background: blue;
    border-radius: 10px;
}

它适用于chrome，但不适用于Firefox和Edge，因为我升级到angular+material 6。有什么想法吗？谢谢你，因为这是chrome的希望您注意到
-webkit-
前缀^_^美丽的。非常感谢。只有当我在根css文件中编写此文件时，它才起作用。在组件css文件中写入时，它不起作用。我可以在开发工具中看到css。有什么主意吗？太好了。有人递给这家伙一枚奖章。很抱歉问一下，你有什么样的演示吗？我不能让它在Angular中工作。这是示例，但有时它在stackblitz上工作，有时不工作。但我在多个项目中使用它，它运行良好
::-webkit-scrollbar {
    width: 4px;
    overflow-y: scroll;
    background: grey;
    box-shadow: inset 0 0 4px #707070;
}

::-webkit-scrollbar-thumb {
    background: blue;
    border-radius: 10px;
}