title: mat-menu styles not being applied in angular
body: <p>I am trying to create a simple layout in angular 2 using angular material and flex css..</p>
  
  <h2>Below is my code...</h2>
  
  <pre><code>&lt;div  class="background" &gt;
  
  &lt;mat-toolbar fxLayout="row"   fxLayoutAlign="space-between  none" &gt;
  
  &lt;div  fxLayout="column" &gt; 
  &lt;p&gt;SPACE STUDY&lt;/p&gt;
  &lt;h6&gt;Rockefeller FY 2018&lt;/h6&gt;
  
  &lt;div  fxShow="true" fxHide.gt-sm="true" fxLayout="column" fxLayoutAlign="start none"&gt;
  
   &lt;h6 [matMenuTriggerFor]="dashboarditems"&gt;
    &lt;mat-icon style="transform: scale(1.2);"&gt;line_weight&lt;/mat-icon&gt; &lt;/h6&gt;
  
    &lt;mat-menu  class="mat-menu-panel"  [overlapTrigger]="true" #dashboarditems="matMenu"&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;a  routerLink='/home' routerLinkActive='active'&gt;
  &lt;span matTooltip="HOME"&gt;&lt;mat-icon style="color:lightgreen;"&gt;home&lt;/mat-icon&gt;&lt;/span&gt;&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;a &gt;
  &lt;span matTooltip="SPACE SURVEY"&gt;&lt;mat-icon style="color:deeppink;"&gt;explore&lt;/mat-icon&gt;&lt;/span&gt;&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;a  &gt;
  &lt;span matTooltip="SPACE ADMIN"&gt;&lt;mat-icon style="color:lightblue;"&gt;account_circle&lt;/mat-icon&gt;&lt;/span&gt;&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;a &gt;
  &lt;span matTooltip="REPORTS"&gt;&lt;mat-icon style="color: orange;"&gt;assignment&lt;/mat-icon&gt;&lt;/span&gt;&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;a &gt;
  &lt;span matTooltip="JOINT USE"&gt;&lt;mat-icon style="color:yellow;"&gt;supervisor_account&lt;/mat-icon&gt;&lt;/span&gt;&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;a  &gt;
  &lt;span matTooltip="HELP"&gt;&lt;mat-icon style="color:red;"&gt;help&lt;/mat-icon&gt;&lt;/span&gt;&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
    &lt;/mat-menu&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;div fxLayout="row"  fxShow="true" fxHide.lt-md="true" &gt;
  &lt;button mat-raised-button routerLink='/home' routerLinkActive='active'&gt;
  &lt;span matTooltip="HOME"&gt;&lt;mat-icon style="color:lightgreen;"&gt;home&lt;/mat-icon&gt;&lt;/span&gt;&lt;/button&gt;
  
  &lt;button mat-raised-button &gt;
  &lt;span matTooltip="SPACE SURVEY"&gt;&lt;mat-icon style="color:deeppink;"&gt;explore&lt;/mat-icon&gt;&lt;/span&gt;&lt;/button&gt;
  
  &lt;button mat-raised-button &gt;
  &lt;span matTooltip="SPACE ADMIN"&gt;&lt;mat-icon style="color:lightblue;"&gt;account_circle&lt;/mat-icon&gt;&lt;/span&gt;&lt;/button&gt;
  
  &lt;button mat-raised-button &gt;
  &lt;span matTooltip="REPORTS"&gt;&lt;mat-icon style="color: orange;"&gt;assignment&lt;/mat-icon&gt;&lt;/span&gt;&lt;/button&gt;
  
  &lt;button mat-raised-button  &gt;
  &lt;span matTooltip="JOINT USE"&gt;&lt;mat-icon style="color:yellow;"&gt;supervisor_account&lt;/mat-icon&gt;&lt;/span&gt;&lt;/button&gt;
  
  &lt;button mat-raised-button &gt;
  &lt;span matTooltip="HELP"&gt;&lt;mat-icon style="color:red;"&gt;help&lt;/mat-icon&gt;&lt;/span&gt;&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/mat-toolbar&gt;
  
  &lt;/div&gt;
  
  
  &lt;style&gt;
  
  .background {
  /* Remember to use the other versions for IE 10 and older browsers! */
  display: flex;
  min-height: 100%;
  font-family: 'verdana', sans-serif;
  color: #fff;
  height:100vh;
  background: #222222;
  background: #16222A; /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #16222A , #3A6073); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #16222A , #3A6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  p{
  font-size:20px;
  font-weight:bold;
  font-family: 'verdana', sans-serif;
  margin:3px;
  }
  
  h6{
      font-size:12px;
      font-weight:bold;
      font-family: 'verdana', sans-serif;
  }
  
  .mat-raised-button{
      text-align:left;
      border-radius:10px;
      font-size:11px;
      font-weight:bold;
      font-family: 'verdana', sans-serif;
      color:white;
      background:transparent;
  }
  
  .mat-icon {
      transform: scale(1.5);
  }
  
  .matTooltip{
      font-size:11px;
      font-weight:bold;
      font-family: 'verdana', sans-serif;
      }
  
  .mat-menu-panel {
      min-width: 35px;
      max-width: 280px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      max-height: calc(100vh - 48px);
      border-radius: 2px;
      outline: 0;
      background: transparent;
      padding-left: 10px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <h2>This is my output</h2>
  
  <p><a href="https://i.stack.imgur.com/P0cXv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P0cXv.png" alt="enter image description here"></a></p>
  
  <p>Here I am trying to change the background color for the mat-menu container to transparent and also set some other styles.</p>
  
  <p>When i change in console its getting reflected back as shown below</p>
  
  <p><a href="https://i.stack.imgur.com/rRMBd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rRMBd.png" alt="enter image description here"></a></p>
  
  <p>But when i applied the same changes in my code , the styles are not being applied.</p>
  
  <p>I also tries explicitly adding class="mat-menu-panel" in the component and the div in which i added the mat-menu.</p>
  
  <p>But still the styles are not being applied..</p>
  
  <p>can anybody please help me to fix this styling..</p>
  
  <p>please access my sample code here.. <a href="https://stackblitz.com/edit/angular-mat-formfield-flex-layout-vc3fsj?file=app%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-mat-formfield-flex-layout-vc3fsj?file=app%2Fapp.component.html</a></p>