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中基本相同。

Answer 2

在某些情况下，.mat-menu-panel上的包装可以是.cdk-overlay-pane，在这种情况下，css应该是这样的。

.cdk-overlay-pane.mat-menu-panel {
    max-width: your_custom_value
}

由于css特异性规则，需要2类特异性来覆盖默认值。