#css #angular #typescript
Вопрос:
Как мы используем класс 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; }
Ответ №1:
Вы можете добавить 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
в соответствии с вашими требованиями
Ответ №2:
Используйте класс 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 }