使用:: ng-deep选择器时如何通过ID为元素应用样式

debugcn 发表于 Dev

R15

我有两个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。我怎样才能解决这个问题

aviboy2006

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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。