Mat checkbox custom and specific colors-CodePudding

I have two mat checkboxes and I'm trying to change the color of each one, one green and the other one red, but what I have found changes both colors and I tried to change them by adding a class, but didnt work, here is the code:

   <div >
            <mat-checkbox color="" >Coming</mat-checkbox>

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

the 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;
}

what I did tried

.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; }

CodePudding user response：

I advise against using ::ng-deep since it's deprecated: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

StackBlitz example: https://stackblitz.com/edit/kingsbury-angular-w-material-j8ufpw?file=src/app/app.component.html,src/styles.scss,src/main.ts

You should be able to apply the styles for the classes in your root sstyles.scss (src/app/styles.scss) as follows:

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

If using styles.css:

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