Issue
I'm really new to Angular and Material. For my course project I'm creating a menu drop and putting many buttons and nested menus on it. However, buttons are going in a row direction.
I thought putting the style to be flex and and column flex-direction would be enough, and that actually works on Inspect directly in the browser. HOWEVER, Angular is not only totally ignoring my .scss
file, but is also ignoring the inline style changes.
SCSS
mat-menu {
display: flex;
flex-direction: column;
}
HTML
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" mat-button [matMenuTriggerFor]="menuSide" aria-label="Open navigation menu">menu</button>
...
<mat-menu #menuSide="matMenu" style="display: flex; flex-direction: column;">
<button mat-button>Materiales</button>
<button mat-button>Centros</button>
<button mat-button>Canjeos</button>
</mat-menu>
Solution
It's because you are using it the wrong way: angular material menu example
Your buttons code should look like
<button mat-menu-item>
//...
</button>
Now concerning why your styles are "overriden", it is probably because:
1- Component styles (your app components) are encapsulated AND isolated.
For a global style, you should define it on the global level (styles.scss). Be careful not to stuff it just because it's convenient, you'll end up regretting it. You could still use ng-deep, but it's really a bad idea and it has been deprecated for a long time.
For material components, you should use custom theming
2- Material is based on mdc tokens. If you inspect the generated code, you'll see that there are wrappers and many html tags + mdc classes used in order to render the right component with the right styles. In other words, it's exactly like when you include one of your components.
Answered By - millenion
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.