我正在使用Angular 2,Angular Material,我愿意在md菜单中显示更多数据,因此,我需要将md-menu的max-width设置为更高的值.其默认值为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设置为无：
@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;
}
View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules,isolations,and protections discussed earlier don’t apply. This is essentially the same as pasting the component’s styles into the HTML.
