材料 ui 复选框 css 覆盖 angular 中的组件

Question

I'm trying to override material UI checkbox css in my Home Component and it is working fine. But there are side effects like css of checkbox in form component is overriding. Can anyone suggest a solution for this.

HTML used

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

css used for over riding by default it is grey color

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

Form component mat checkbox - for this component also it is overriding border color to blue without writing any css

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

I believe this is happening due to usage of ::ng-deep

I even tried ViewEncapsulation also in the Home component. It is still overriding css in Form component and other css in both the components.

Any help regarding this would be appreciated.

Answer 1

To apply the style only inside a specific child component, add the :host selector to the following code in the CSS of that component:

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

This will scope this rule to all checkboxes which are in this current component and all its children and will work pretty well in case of routed components.

But if you want to stick this css rule only for home page template then you can use:

home.component.css

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

Angular will replace it with:

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

where _ngcontent-rvb-c0 is unique identifier of current compoent