Блог

Как мы используем класс ng deep css, специфичный только для примера 1 флажка, а не для всех флажков в моем компоненте

например, я хочу использовать это только с одним флажком, а не со всеми флажками в моем компоненте. как нам это сделать ? Спасибо.

Я хочу применить его только к определенному флажку . потому что в моем компоненте есть 5 разных флажков , но я хочу изменить только 1 флажок, поэтому 4 не должны быть затронуты.

Так , например, ниже есть 2 флажка, CSS должен влиять только на первый флажок и не включать второй

#код флажка

 lt;mat-checkbox  *ngIf="currentSelectedTenants(subtenant) else currentSubtenants"  color="accent"   [(ngModel)]="dealDispositionFormFields.currentSubtenants"  [checked]="currentSelectedTenants(subtenant)"   (change)="changeCurrentSubtenants($event,subtenant)"  style="margin-left:10px;"gt;  lt;mat-label class="alter-text-color" style="font-size: 12px;"gt;{{subtenant.subtenantName}}lt;/mat-labelgt;  lt;/mat-checkboxgt;     lt;mat-checkbox  *ngIf="currentSelectedTenants(subtenant) else currentSubtenants"  color="accent"   [(ngModel)]="dealDispositionFormFields.notCurrentSubtenant"  [checked]="currentSelectedTenants(subtenant)"   (change)="changeCurrentSubtenants($event,subtenant)"  style="margin-left:10px;"gt;  lt;mat-label class="alter-text-color" style="font-size: 12px;"gt;{{subtenant.subtenantName}}lt;/mat-labelgt;  lt;/mat-checkboxgt;   

#css

 ::ng-deep .mat-checkbox-checkmark-path {  stroke:rgba(0, 125, 255, 1) !important;  }  

Вы можете добавить mat-checkbox внутри a div и назначить ему один class :

 lt;div class="new-class"gt;  lt;mat-checkboxgt;  lt;/mat-checkboxgt; lt;/divgt;  

И ваш css будет выглядеть так:

 ::ng-deep .new-class .mat-checkbox-checkmark-path {  stroke:rgba(0, 125, 255, 1) !important;  }  

PS: Вы можете назвать new-class в соответствии с вашими требованиями

Используйте класс css в флажке mat, который вы хотите настроить:

 lt;mat-checkbox class="custom-mat-checkbox"gt; ... lt;/mat-checkboxgt;  

А затем настройте его с помощью CSS.

 ::ng-deep mat-checkbox.custom-mat-checkbox {  // custom css goes here }