Seeking to customize default styles of md-menu in Angular Material. The challenge lies in the dynamic generation of elements by Angular Material, preventing direct access from HTML.
Visual representation of DOM:
https://i.sstatic.net/v8GE0.png
Component's HTML structure (md-menu dynamically generates this section):
<md-toolbar color="primary">
<h1>Logo</h1>
<span class="spacer"></span>
<img src="../../../images/avatar-default.png" class="avatar" [mdMenuTriggerFor]="userMenu" />
<md-menu #userMenu="mdMenu">
<button md-menu-item>{{username}}</button>
<button md-menu-item>Log Out</button>
</md-menu>
</md-toolbar>
It is understood that targeting the div (as circled in the image) through global styles using .mat-menu-content {...} can lead to unintended consequences affecting other similarly styled elements. Restriction in setting styles to this div from component CSS also presents a dilemma as the element exists outside the component's jurisdiction. Efforts are focused on finding a solution to alter styles for this specific element within component CSS without interfering with others sharing the same style.
If there are suggestions or methods to accomplish this task, kindly share your insights.