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

问题描述

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

 <md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown"><按钮 md-menu-item ><div class="row notification-row"><div><span class="image-container">选项 1 </span>

</md-菜单>

在 CSS 文件中，我这样做:

.mat-menu-panel.notifications-dropdown {最大宽度:无；宽度:100vw；左边距:-8px；边距顶部:24px；溢出:可见；}.通知行{宽度:424px；}

在控制台中，我可以识别设置默认值的类: max-width:280px; ，当我在控制台中编辑它时，它运行良好，但即使我尝试要在我的 CSS 代码中覆盖它，我无法做到这一点.我也试过这个:

.mat-menu-panel{最大宽度:600px；}

还有这个:

.cdk-overlay-container .mat-menu-panel{最大宽度:600px；宽度:100vw；左边距:-8px；边距顶部:24px；}

如何覆盖这个默认值?

解决方案

设置视图封装 到您的组件上的 None :

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

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

.mat-menu-panel.notifications-dropdown {最大宽度:无；宽度:100vw；左边距:-8px；边距顶部:24px；溢出:可见；}.通知行{宽度:424px；}

<块引用>

View Encapsulation = None 表示 Angular 没有视图封装.Angular 将 CSS 添加到全局样式中.范围界定前面讨论的规则、隔离和保护措施不适用.这个本质上与将组件的样式粘贴到HTML.

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>   

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;
}

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;
} 

And this:

.cdk-overlay-container .mat-menu-panel{
     max-width:600px;
    width: 100vw;
    margin-left: -8px;
    margin-top: 24px;
}

How can I override this default value?

解决方案

Set the View Encapsulation to None on your component:

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

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 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屋！