title: How to override angular material theme from global css file
body: <p>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:</p>
  
  <pre><code>::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;
  }
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>encapsulation: ViewEncapsulation.None
  </code></pre>
  
  <p>the code in other files doesn't see my overriding css class.
  Does anyone have any idea why?</p>
  
  <p>Thanks in advance!</p>