Блог

Главная - Вопросы по программированию - Как применить стиль по идентификатору для элемента при использовании ::ng-deep selector

Как применить стиль по идентификатору для элемента при использовании ::ng-deep selector

#css #angular #angular-material #css-selectors

#css #угловой #angular-материал #css-селекторы

Вопрос:

У меня их два checkbox angular-material . Я хочу применить другой стиль для обоих checkbox , используя ::ng-deep селектор.

Это мой код

 <section class="example-section">
<mat-checkbox id=" #matCh" class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox id=" #matCh2"  class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>

Это стиль

 <style id="matCh">
 ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  } 
  
 ::ng-deep
   .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  }
</style>


<style id="matCh2">
  ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
     background-color: green;
   } 
   
  ::ng-deep
    .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
     background-color:green;
   }
 </style>

Я тоже пробовал этот способ, но показывает green только цвет

 <style>
 #matCh ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  } 
  
 #matCh ::ng-deep
   .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  }
</style>

Он всегда показывает green цвет, как checkbox нет red . Как я могу это исправить

Комментарии:

1. я заметил, что в вашем <mat-checkbox id=" #matCh" есть пробел перед # . Вам не нужно вводить # свой идентификатор. # используется селектором css для ссылки на идентификатор элемента html. Итак, вы можете попробовать: <mat-checkbox id="matCh" ........ а <mat-checkbox id="matCh2" ........ также, мне просто интересно, как вы ввели стиль. Это в отдельных классах или встроено в .ts файл?

Ответ №1:

Stackblitz : https://stackblitz.com/edit/angular-xxgcrb?file=src/app/checkbox-configurable-example.css

Вы должны использовать другой класс css для идентификации. Почему у вас всегда зеленый цвет, потому что это последний css, который переопределяет предыдущий из-за отсутствия уникального идентификатора в обоих флажках.

HTML :

 <section class="example-section">
<mat-checkbox id="#matCh"   class="example-margin firstone" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox id="#matCh2"    class="example-margin secondone" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>

css :

 ::ng-deep .firstone.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.firstone.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep .firstone .mat-checkbox-background,
.firstone.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep .secondone.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}
::ng-deep .secondone .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}

Даже вы можете использовать id как уникальный идентификатор, как указано в комментарии выше. удалите пробел в вашем id и # и используйте как :

 ::ng-deep #matCh.mat-checkbox-checked.mat-accent .mat-checkbox-background,
#matCh.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep #matCh .mat-checkbox-background,
#matCh.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep #matCh2.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}
::ng-deep #matCh2 .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}