How to override angular material theme from global css file

Viewed 2203

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 Answers
Related