title: Change Angular 2/4 Material default styles for "md-menu"
body: <p>I'm trying to change default Angular Material styles of <code>md-menu</code>. The problem is the Angular Material generates elements dynamically and I can't get access to them from my HTML.</p>
  
  <p>Here is my DOM:</p>
  
  <p><a href="https://i.stack.imgur.com/v8GE0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v8GE0.png" alt="enter image description here"></a></p>
  
  <p>And here is my component HTML (<code>md-menu</code> generates that DOM):</p>
  
  <pre><code>&lt;md-toolbar color="primary"&gt;
    &lt;h1&gt;Logo&lt;/h1&gt;
    &lt;span class="spacer"&gt;&lt;/span&gt;
    &lt;img src="../../../images/avatar-default.png" class="avatar" [mdMenuTriggerFor]="userMenu" /&gt;
  
    &lt;md-menu #userMenu="mdMenu"&gt;
      &lt;button md-menu-item&gt;{{username}}&lt;/button&gt;
      &lt;button md-menu-item&gt;Log Out&lt;/button&gt;
    &lt;/md-menu&gt;
  &lt;/md-toolbar&gt;
  </code></pre>
  
  <p>I know that I can get access to that <code>div</code> (selected on the picture) from global styles using <code>.mat-menu-content {...}</code>, but it will affect other elements with such classes. And I'm unable to set styles to this div from component CSS, because the element is outside component scope. So I'm trying to find the way to change styles of this element from component CSS and without affecting other elements with such style.</p>
  
  <p>If there is a way to implement it, please, let me know.</p>