title: Can't override the angular material theme with my css properties
body: <p>I am using <code>Angular 6.0.8</code> with <code>Angular Material theme</code> version 6.4.0</p>
  
  <p>Whenever I try to slightly modify the material theme, it never works, as I always find the material theme properties to overwrite my CSS properties as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>currentColor   .mat-input-element (material theme)
  initial        input, textarea, select, button (user agent stylesheet)
  #1072BA        .English
  #1072BA        .English
  #1072BA        body</code></pre>
  </div>
  </div>
  </p>
  
  <p>Only the first property is applied (the rest are striked through)</p>
  
  <p>I have tried multiple variations to solve this but none worked (like using important or changing the order of importing the themes)</p>
  
  <p>So what is the proper way to change small things in the material theme &amp; the user stylesheet? (to make this English rule applied for example)</p>
  
  <p>My <strong>styles.scss</strong> is as follows, it works well only what overrides the Material theme like colors &amp; fonts does not work:</p>
  
  <pre><code>@import '~@angular/material/prebuilt-themes/indigo-pink.css';
  
  /* You can add global styles to this file, and also import other style files */
  
  /* prevent clicking in the wizard nav header */
  .mat-horizontal-stepper-header{
    pointer-events: none !important;
  }
  
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./assets/material_icons/material_icons.woff2) format('woff2');
  }
  
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  
  .mat-radio-button{
    margin: 10px;
  }
  
  .mat-checkbox{
    margin-bottom: 10px;
  }
  
  .Done-numbers{
    color: red;
    font-weight: bold;
  }
  
  .finInfo-hint{
    color: gray;
  }
  
  .finInfo-success{
    color: green;
  }
  
  .Arabic {
    font-family: "AXtManal" !important;
    margin: 0;
    /* background: #fff; */
    font: normal 16px/20px Verdana;
    color: #1072BA;
    text-shadow: 0 0 0 #1072BA;
  }
  
  .English {
    font-family: "Rotis" !important;
    margin: 0;
    /* background: #fff; */
    font: normal 16px/20px Verdana;
    color: #1072BA;
    text-shadow: 0 0 0 #0078be;
  }
  </code></pre>
  
  <p><strong>Update 1:</strong></p>
  
  <p>Please check out <a href="https://stackblitz.com/edit/angular-njhxfb?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">this stackblitz example</a> , the problem is very clear in it </p>
  
  <p>1- I am expecting that the enclosing div with <strong>the Arabic class</strong> shall change the <strong>font &amp; color</strong> of the contained material form fields but it doesn't (like the first field with Sushi, font is not changed)</p>
  
  <p>This is very important as all elements are enclosed in a div with ngClass that have either English or Arabic &amp; I want to apply the class to all enclosed elements including the material form fields</p>
  
  <p>2- How to change the color of all the form labels from the blue to red or green ?</p>