如何解决使用:: ng-deep选择器时如何通过ID为元素应用样式
我有两个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
的{{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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。