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

如何覆盖此默认值?

最佳答案

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

关于css - md-menu覆盖Angular 2中的默认最大宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45841459/

10-11 22:37
查看更多