我正在使用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.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。