title: Override Readonly/Disable Styling/CSS
body: <p>What is the right/best way to override the material design styling when disabling input fields?</p>
  
  <p><strong>Out of box</strong>
  <a href="https://i.stack.imgur.com/CvcAV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CvcAV.png" alt="disabled screenshot"></a></p>
  
  <p><a href="https://material.angular.io/components/input/examples" rel="noreferrer">Angular Material Input Examples</a></p>
  
  <hr>
  
  <p>I was able to achieve my goal w/ the following css but is that a valid way?  Seems like I'm messing with the internals of Angular Material.  Is there a better way?</p>
  
  <pre class="lang-css prettyprint-override"><code>// override material design input field styling for readonly mode
  .mat-form-field-disabled .mat-form-field-underline {
      height: 0;
  }
  
  .mat-input-element:disabled {
      color: $header-text-color;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nlw3l.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nlw3l.png" alt="modified disabled screenshot"></a></p>