title: Override style of first div of mat-form-field
body: <p>How can I override the CSS on the first div generated by the <a href="https://material.angular.io/components/form-field/overview" rel="noreferrer"><code>&lt;mat-form-field&gt;</code></a>?</p>
  
  <p><strong>Background</strong></p>
  
  <p>I have a bunch of fields in an <a href="https://material.angular.io/components/card/overview" rel="noreferrer"><code>&lt;mat-card&gt;</code></a> and the <strong>last</strong> field is causing too much padding at the bottom of the card.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field id="this-feels-hacky-and-wrong"...&gt;
      &lt;!-- I want to remove the padding-bottom from this element --&gt;
      &lt;div class="mat-input-wrapper mat-form-field-wrapper"&gt;
        ...
      &lt;/div&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lHNyF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lHNyF.png" alt="padding to remove"></a></p>
  
  <p>In my <code>stlye.css</code> I put</p>
  
  <pre class="lang-css prettyprint-override"><code>#this-feels-hacky-and-wrong div{
    padding-bottom: 0;
  }
  </code></pre>
  
  <p>and that works but there must be a better/right way to do this, no?</p>
  
  <p>I would <strong>prefer</strong> a solution that is in my <code>component.scss</code> file.</p>