md-menu覆盖Angular 2中的默认最大宽度 [英] md-menu override default max-width in Angular 2

问题描述

我正在使用Angular 2，Angular Material，并且我愿意在md菜单中显示更多数据，因此，我需要将md菜单的最大宽度设置为更高的值.默认值为280px.

I'm using Angular 2 , Angular Material and I am willing to display more data in a md-menu and, therefore, I need to set the max-width of the md-menu to a higher value. Its default value is of 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文件中，我这样做:

In CSS file, I do this:

.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代码中覆盖它，我仍然无法做到这一点.我也尝试过这个:

In console, I can identify the class where the default value is set: max-width:280px; , and when I edit it in my console, it works perfectly, but even though I try to override it in my CSS code, I am not able to do that. I tried this, also:

.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,
})

然后在组件css中，您可以完全执行您尝试的操作:

Then in your component css you can do exactly what you tried:

.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.

View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

这篇关于md-menu覆盖Angular 2中的默认最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！