css - Angular Material 样式

Question

我似乎可以使用 css 为 mat-option 字段上的滚动条设置样式。我想让滚动条具有不同的大小和颜色。任何帮助或指导将不胜感激。

我在下面尝试这样做，但没有成功。

How to change the scrollbar styles in Angular Material select?

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let product of filteredProducts | async" [value]="product">
      {{ product.name }}
    </mat-option>
  </mat-autocomplete>

Answer 1

要将样式应用于自动完成面板，您只需向自动完成元素添加一个类。请参阅“类”@Input 上的文档:https://material.angular.io/components/autocomplete/api#MatAutocomplete .

例如:

<mat-autocomplete class="custom-scroll" #auto="matAutocomplete" [displayWith]="displayFn">

然后在您的global scss 中:

.custom-scroll.mat-autocomplete-panel {

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        border-radius: 4px;
        background-color: green;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: blue;
    }
}