Problem targeting a component to set style-CodePudding

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  #select [multiple]="multiselect" [formControl]="selectField" >
      <div >
          <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected"
                         
                          [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 ?

CodePudding user response：

for changing background of label you can use this code

    .mat-checkbox-label{ background-color: rgb(49, 201, 11);}

and for changing check mark background this :

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

and you have to add this classes to main style file which is defined in angular.json file in the "styles" key , it seems like this :

"styles": [
          "src/styles.scss"
        ],

CodePudding user response：

you need to add a class to the form you're using or wrap it with a div with the class then use ::ng-deep like this

<form novalidate [formGroup]="form" >
    <mat-form-field>
    <mat-label>{{labelText}}</mat-label>
    <mat-select  #select [multiple]="multiselect" [formControl]="selectField" >
      <div >
          <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected"
                         
                          [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>

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

this will limit the effect of ng-deep to this form only