Currently, I have successfully overridden the CSS of a Material UI checkbox in my Home Component. However, this has caused some unintended side effects such as overriding the CSS of checkboxes in other components, like the form component. Does anyone have a solution for this issue?
Here is the HTML snippet used:
<mat-checkbox formControlName="home">
Home
</mat-checkbox>
This is the CSS used to override the default grey color:
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}
Interestingly, without any additional CSS, the border color of the mat-checkbox in the Form component is also being overridden to blue.
<mat-checkbox formControlName="form">
Form
</mat-checkbox>
It is suspected that the use of ::ng-deep may be causing this issue.
Attempts have been made using ViewEncapsulation in the Home component to resolve this problem, but it persists in both the Form component and other components. Any insights or solutions would be greatly appreciated.