垫复选框自定义和特定颜色

Question

我有两个垫子复选框，我正在尝试更改每个复选框的颜色，一个是绿色，另一个是 红色，但是我发现两种颜色都发生了变化，我尝试通过添加一个类来更改它们，但是没有用，这里是代码：

   <div class="half right">
            <mat-checkbox color="" class="entradaCheck">Coming</mat-checkbox>

            <mat-checkbox color="primary" class="salidaCheck">Exit</mat-checkbox>
        </div>

的CSS

    ::ng-deep .mat-checkbox-checked .mat-checkbox-background,
.mat-checkbox-indeterminate .mat-checkbox-background {
    background-color: rgb(15, 91, 33) !important;
}

::ng-deep .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
    background-color: rgb(15, 91, 33) !important;
}

我所做的尝试

.entradaCheck::ng-deep .mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-indeterminate .mat-checkbox-background {
    background-color: rgb(15, 91, 33) !important; }

.entradaCheck::ng-deep .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
    background-color: rgb(15, 91, 33) !important; }

Answer 1

我建议不要使用 ::ng-deep，因为它已被弃用：https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

您应该能够在您的屋顶 styles.scss (src/app/styles.css) 中为类应用样式，如下所示：

mat-checkbox {
  &.entradaCheck {
    background-color: rgb(15,91,33) !important;
  }
}

如果使用styles.css：

mat-checkbox .entradaCheck{
    background-color: rgb(15,91,33) !important;
}