问题描述
我有一个带有材质按钮菜单的 EntryComponent.当我尝试使用 ::ng-deep 覆盖默认样式时,父组件中所有按钮组件的样式也会发生变化.
I am having an EntryComponent that has a material button menu.When I try to override the default style by using ::ng-deep the styling changes for all the button component 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>
我也尝试使用类来定位样式,但我猜它不像通常的 CSS 那样工作.
I also tried to target styling using a class but it doesn't work like usual CSS I guess.
<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>
请分享您的经验或知识.
Please share your experience or knowledge.
入口组件
<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>
PS:这不是一个重复的问题,因为我们能够全局设置材料元素的样式,但问题是如何通过 Id 或 Class 设置目标 dom 元素的样式.希望这能消除混乱
PS: this is not a duplicate issue as mentioned as we are able to style material elements globally but the question was how to style a targeted dom element by means of Id or Class. Hope this clears the confusion
推荐答案
正如 Milad 已经回答的那样,只需要使用这种样式
As already answered by Milad just needed to use this styling
<style>
:host /deep/ .actions{
max-width: 50px !important;
min-width: 45px !important;
height: 5em;
}
:host /deep/ .actions .mat-button-ripple mat-ripple{
max-width: 40px !important;
min-width: 20px !important;
}
</style>
这篇关于使用 CSS 在角度材料 2 元素中按 Id 或 Class 定位特定元素样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!