'Problem targeting a component to set style

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 ?

cssangularangular-material


Solution 1:[1]

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

Solution 2:[2]

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" class="my-custom-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>

.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

Solution 3:[3]

ng-deep is deprecated, and was never necessary. Angular uses view encapsulation, so any css you put in the component's css file will not affect other components, such as the mat-checkbox, by default.

You can put the css in a global file like styles.css and use a specific selector, I'd recommend prepending the component name, or simply adding an id:

In styles.css or another global css file

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

You can create a new global style file and add it to the styles array in angular.json if you want. Or you can simply import it into styles.scss if you're using scss.

OR

You can disable view encapsulation for the component, which will cause all css in that component's css file to become global:

In the component.ts file

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})
export class MyComponent {}

Solution 4:[4]

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"
        ],

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MisterniceGuy
Solution 2 DAbuzied
Solution 3 Chris Hamilton
Solution 4 Ali Mirzaie

Related Questions