Пользовательский цвет mat-checkbox не может быть изменен

Question

Я использую Angular Material для своего проекта, и я хочу изменить цвет mat-checkbox, но не хочу использовать их, поэтому, конечно, я использовал разделы Elements и Styles в моем браузере Chrome и отслеживал классы, которые mat-checkbox использует и нашел это: ".mat-checkbox-ripple .mat-ripple-element".

::ng-deep .mat-checkbox-ripple .mat-ripple-element {
  background-color: black!important;
}

Итак, это мой код, я пробовал :: ng-deep, / deep / и без каких-либо из них, и результат всегда один и тот же, цвет флажка не меняется, но в «Стилях» я ясно вижу, что он говорит, что я перезаписал его цвет.

Вот версии вещей, которые я использую:

"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",

Как мне изменить цвет?

Answer 1

ripple - это название волнового эффекта капли воды, который отображается, когда вы нажимаете на Компоненты материала, поэтому вы нацеливаетесь не на тот элемент.

Попробуйте:

// overwrite the checkbox background
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: black !important;
}

// overwrite the ripple overlay on hover and click
::ng-deep .mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {
  background-color: black !important;
}

Answer 2

Используйте css для .mat-checkbox-background

::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
  background: pink!important;
}

См. Рабочий код