md-menu覆盖Angular 2中的默认最大宽度

Question

我正在使用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;
}

如何覆盖此默认值？

Answer 1

在组件上将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;
}

View Encapsulation = None表示Angular不进行视图封装.Angular将CSS添加到全局样式中.前面讨论的范围规则,隔离和保护不适用.这与将组件的样式粘贴到HTML中基本相同.