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

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

如何覆盖此默认值？

@Component({
    templateUrl: './my.component.html',styleUrls: ['./my.component.css'],encapsulation: ViewEncapsulation.None,})

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}