title: Problem mat-form-field outline background-color on hover
body: <p>I have a CSS problem when I pass my mouse over a <code>mat-form-field</code>.</p>
  
  <p>To be able to use a colored mat-card, I added some CSS class in <code>style.scss</code> to change the <code>background-color</code> of the <code>mat-form-field</code>.</p>
  
  <pre><code>.mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; }
  .mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; }
  .mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white!important; }
  mat-form-field mat-label { background-color: rgba(255, 255, 255, 0.9); }
  </code></pre>
  
  <p>It works fine, but when I hover my mouse over a <code>mat-form-field</code>,
  the background turns red for a fraction of a second.
  Unfortunately I can't find the CSS class allowing me to remove this transparency.</p>
  
  <p><strong>StackBlitz:</strong> <a href="https://stackblitz.com/edit/mat-form-field-outline-background-over" rel="noreferrer">here</a></p>
  
  <p><a href="https://i.stack.imgur.com/dvAhU.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/dvAhU.gif" alt="enter image description here"></a></p>