Problem targeting a component to set style

Issue

I have a custom component that uses a mat-checkbox. And i want to only change the bqckground for that component but i don’t have much luck.

My Template code is below

<form novalidate [formGroup]="form">
    <mat-form-field>
    <mat-label>{{labelText}}</mat-label>
    <mat-select class="select" #select [multiple]="multiselect" [formControl]="selectField" >
      <div class="select-all">
          <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected"
                         class="mat-check-all"
                          [ngModelOptions]="{standalone: true}"
                          [indeterminate]="isIndeterminate()"
                          [checked]="isChecked()" 
                          (click)="$event.stopPropagation()"
                          (change)="toggleAllSelection($event)">{{text}}</mat-checkbox>
      </div>
      <mat-option *ngFor="let item of data" [value]="item[idField]">
        {{item[fieldName]}}
      </mat-option>
    </mat-select>
    </mat-form-field>
    </form>

i tried the following with no luck

.mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }
.mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }
.select-all .mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }
.select .select-all .mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }
::ng-deep .select .select-all .mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }

neither of the above made any difference. When i used

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }

it changed the color for my checkbox but also for any other checkbox on the form. So how can i limit the change to the checkbox in my componenet ?

Solution

Based on your above template code you can just simply set the color for your custom component via

::ng-deep
  .select-all
  .mat-checkbox-checked.mat-accent
  .mat-checkbox-background {
  background-color: rgb(224, 198, 28) !important;
}

You can verify in the forked StackBlitz Sample

Answered By – MisterniceGuy

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.