How to override angular material theme from global css file

2
votes

I am using angular material. Sometimes I want to override built in themes which is in my case indigo-pink.css. I do it like that:

::ng-deep .mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element,
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, 
::ng-deep .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #10014B !important;
}

and it is working fine for me. However, when I am using a same code from the global css file, where I set an encapsulation=none 

encapsulation: ViewEncapsulation.None

the code in other files doesn't see my overriding css class. Does anyone have any idea why?

Thanks in advance!

1
angularangular-material
It should work if you remove ::ng-deep. See the checkbox in this stackblitz. Please note that I did not even have to set the !important flag. - ConnorsFan

1 Answers

0
votes

If you write CSS at global level you don't have to use ::ng-deep if there specificity is higher they will be applied by default (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) to explore encapsulation more you can follow below this (https://alligator.io/angular/viewencapsulation/)