title: Why can't I style angular material stepper elements directly?
body: <p>Here is a code example I've forked from the <a href="https://material.angular.io/components/stepper/overview" rel="noreferrer">official angular documentation</a>  for stepper: <strong><a href="https://stackblitz.com/edit/angular-tth817" rel="noreferrer">https://stackblitz.com/edit/angular-tth817</a></strong> </p>
  
  <p>In my fork, I'm trying to achieve a couple of things: </p>
  
  <ul>
  <li><p>I want to hide the stepper header. </p>
  
  <ul>
  <li>I've tried doing this by styling <code>.mat-horizontal-stepper-header-container</code> (actually just adding a border to it). </li>
  </ul></li>
  <li><p>I forced the content of the last step to be tall. There, you can see that the buttons on each step no longer align. What I would like to do is have the stepper content fill its parent (<code>.container</code>, the thick red dashed line), and then I can use flex box to get the buttons to all align at bottom. </p>
  
  <ul>
  <li>I added <code>mat-stepper-horizontal, mat-stepper-horizontal</code> rules, and these don't apply either.</li>
  </ul></li>
  </ul>
  
  <p>Can you tell me: </p>
  
  <ul>
  <li><p>Why aren't these rules appearing at all? (F12 developer tools, shows all the other rules, but not that ones that are stepper specific). What's going on here? </p></li>
  <li><p>Generally - what philosophy should I use for styling the stepper? The best alternative I can think of, is to put a content div inside each step, and size it with vh and vw or something. </p></li>
  <li><p>How would I get rid of the header? </p></li>
  </ul>