我正在使用Angular 2和Angular Material,并且愿意在md菜单中显示更多数据,因此,我需要将md菜单的最大宽度设置为更高的值。其默认值为280px。
<img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/>
<md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
<button md-menu-item >
<div class="row notification-row">
<div>
<span class="image-container"> Option 1 </span>
</div>
</div>
</button>
</md-menu>
在CSS文件中,我这样做:
.mat-menu-panel.notifications-dropdown {
max-width:none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
overflow: visible;
}
.notification-row{
width: 424px;
}
在控制台中,我可以识别设置了默认值的类:
max-width:280px;
,当我在控制台中对其进行编辑时,它可以正常工作,但是即使我尝试在CSS代码中覆盖它,也无法做到这一点。 。我也尝试过这个:.mat-menu-panel{
max-width: 600px;
}
和这个:
.cdk-overlay-container .mat-menu-panel{
max-width:600px;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
}
如何覆盖此默认值?
最佳答案
在组件上将View Encapsulation设置为None:
@Component({
templateUrl: './my.component.html' ,
styleUrls: ['./my.component.css'],
encapsulation: ViewEncapsulation.None,
})
然后,在组件css中,您可以完全执行您尝试的操作:
.mat-menu-panel.notifications-dropdown {
max-width:none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
overflow: visible;
}
.notification-row{
width: 424px;
}
关于css - md-menu覆盖Angular 2中的默认最大宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45841459/