角材料-更改单击的垫列表选项的颜色

qum*_*uma 6 angular-material2

是否可以更改已选中复选框的默认颜色(mat-pseudo-checkbox-checked):

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>
Run Code Online (Sandbox Code Playgroud)

我试过了:

.mat-pseudo-checkbox-checked {
    background-color: #00f;
}
Run Code Online (Sandbox Code Playgroud)

但这没有影响。

小智 9

class="mat-primary"进去就行<mat-list-option>

<mat-selection-list>
            <mat-list-option class="mat-primary" checkboxPosition="before" *ngFor="let shoe of typesOfShoes">
              {{shoe}}
            </mat-list-option>
Run Code Online (Sandbox Code Playgroud)

输出:

在此处输入图片说明

  • 这才是紧跟主题的正确做法。就我而言,我需要垫子口音。 (2认同)

小智 6

我不确定,但您可以尝试使用它

.mat-select-content, .mat-select-panel-done-animating {
     background: mat-color($background, card); 
}
Run Code Online (Sandbox Code Playgroud)

.mat-select-content, .mat-select-panel-done-animating {
    background: mat-color($background, card);
    .mat-option {
        color : mat-color($foreground, text);
    }
}
Run Code Online (Sandbox Code Playgroud)

有关详细信息,您还可以查看以下链接 https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss