My EntryComponent features a material button menu where I attempted to customize the default style using ::ng-deep. However, the changes affected all button components in the parent Component as well.
<style>
::ng-deep .mat-button{
max-width: 50px !important;
min-width: 45px !important;
height: 5em;
}
::ng-deep .mat-button-ripple mat-ripple{
max-width: 40px !important;
min-width: 20px !important;
}
</style>
I also tried targeting styling with a class, but it didn't behave like usual CSS methods.
<style>
.actions ::ng-deep .mat-button{
max-width: 50px !important;
min-width: 45px !important;
height: 5em;
}
.actions ::ng-deep .mat-button-ripple mat-ripple{
max-width: 40px !important;
min-width: 20px !important;
}
</style>
Could you please provide your insights or experiences on this matter?
Entry Component
<button md-button [mdMenuTriggerFor]="menu" class="actions">
<md-icon>flash_on</md-icon></button>
<md-menu #menu="mdMenu">
<button md-menu-item>
<md-icon>autorenew</md-icon>
</button>
<button md-menu-item>
<md-icon>border_color</md-icon>
</button>
<button md-menu-item>
<md-icon>delete</md-icon>
</button>
<button md-menu-item>
<md-icon>perm_identity</md-icon>
</button>
<button md-menu-item>
<md-icon>payment</md-icon>
</button>
</md-menu>
Note: This is not a duplicate issue, as we are able to globally style material elements. The question here is how to style a specific DOM element using Id or Class selectors. Hopefully, this clarifies any confusion.