title: Angular material 13 components default style override
body: <p>I am trying to override styles of Angular Material 13 components but its throwing error of style not found to import. Since version 12 of Angular material they have separated the components styles into their own style file, I did not find proper documentation on that.</p>
  <p>Here is a short code what I am trying to achieve. Any help appreciated.</p>
  <p>I have tried following versions of code to override styles.</p>
  <pre><code>// V1
  @use '@angular/material'as mat;
  @use '@angular/material/toolbar/toolbar-theme'as toolbar with($height-desktop: 84px);
  
  // V2
  @use '@angular/material'as mat;
  @use '@angular/material/toolbar/toolbar-variables'as toolbar with($height-desktop: 84px);
  
  // V3
  @use '@angular/material'as mat;
  @use '@angular/material/toolbar'as toolbar with($height-desktop: 84px);
  
  // V4
  @use '@angular/material'as mat with($height-desktop: 84px);
  </code></pre>
  <p>PS: I understand I can update styles by directly using material components class names but it would be great if I can update styles properly.</p>