材质ui复选框css覆盖了角度中的组件

Question

我正在尝试覆盖主组件中的材质UI复选框css，它运行良好。但也有一些副作用，比如表单组件中复选框的css被覆盖。有人能提出解决方案吗。

HTML使用的

<mat-checkbox formControlName="home">
Home
</mat-checkbox>

css默认为灰色

::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}

表单组件mat复选框-对于这个组件，它也将边框颜色覆盖为蓝色，而不写任何css

<mat-checkbox formControlName="form">
Form
</mat-checkbox>

我相信这是由于使用：ng-dept造成的

我甚至在Home组件中尝试了ViewEncapsulation。它仍然覆盖Form组件中的css和两个组件中的其他css。

如有任何帮助，我们将不胜感激。

Answer 1

要仅在特定子组件内部应用样式，请将:host选择器添加到该组件的CSS中的以下代码中：

:host ::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}

这将把这个规则的范围扩大到这个当前组件及其所有子组件中的所有复选框，并且在路由组件的情况下工作得很好。

但如果你想把这个css规则只用于主页模板，那么你可以使用：

home.component.css

.mat-checkbox ::ng-deep  .mat-checkbox-frame {
border-color: blue !important;
}

Angular将替换为：

.mat-checkbox[_ngcontent-rvb-c0] .mat-checkbox-frame {
border-color: blue !important;
}

其中_ngcontent-rvb-c0是当前成分的唯一标识符