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

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

我怎样才能覆盖这个默认值？

Set the 查看封装 https://angular.io/guide/component-styles#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。