角度材质样式

Posted 2023-03-13

【中文标题】角度材质样式

【英文标题】：Angular Material Styling

【发布时间】：2019-04-05 17:18:40

【问题描述】：

我似乎可以使用 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>

【问题讨论】：

有人有吗？我查看了 Angular Materials 网站，没有发现任何与样式有关的内容 material.angular.io/components/select/…

【参考方案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;
    

【参考方案2】：

如果您想在 Angular 项目中为滚动条进行全部更改，请使用此选项：

::-webkit-scrollbar 
width: 6px !important;

::-webkit-scrollbar-track 
border-radius: 4px !important;
background-color: #EFEFEF!important;

::-webkit-scrollbar-thumb 
border-radius: 4px !important;
background-color: #DCB064 !important;