css - Angular Material design 复选框黑色前景色(符号颜色)

Question

我正在使用 <mat-checkbox> ... </mat-checkbox>我的应用程序中的组件，我需要将符号的颜色(“勾号”✓)设置为黑色。我可以通过 css 设置背景颜色，但对于“前景”颜色没有任何作用。

代码:

my.ts
          <mat-checkbox name="{{field.name}}"
                        [ngModel]="field.valueChecked"
                        ...
                        [ngClass]="{
                 'mandatory': field.mandatory == true
                 ,'optional': field.mandatory == false
                 ,'checkbox' : true}"
                 >
          </mat-checkbox>


my.css
    .checkbox {
        background-color: #3197ee !important;
        color: #050911 !important;
    }

欢迎任何如何改变颜色的解决方案!

Answer 1

试试这个

.mat-checkbox-checkmark-path {
    stroke: #000 !important;
}

或

/deep/ .mat-checkbox-checkmark-path {
    stroke: #000 !important;
}