md菜单覆盖角2中的默认最大宽度

我正在使用Angular 2，Angular Material，我愿意在md菜单中显示更多数据，因此，我需要设置最大宽度md-menu更高的值。它的默认值是280px。md菜单覆盖角2中的默认最大宽度

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

我怎么能覆盖这个默认值？

来源

2017-08-23 Emanuela Colta

您是否尝试过'！important'或更强大的选择器（例如包括父母等）？ –

尝试将'.mat-menu-panel.notifications-dropdown'样式添加到全局样式表中，而不是您的组件样式。另请参阅[本指南]（https://github.com/angular/material2/blob/master/guides/customizing-component-styles.md） –

是的，我试过这种方式：'.mat-menu-panel。 notification-dropdown { max-width：600px！important; 宽度：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; 
}

查看封装=无意味着角不没有视图封装。 Angular将CSS添加到全局样式中。前面讨论的规则，隔离和保护范围不适用。这个与将组件的样式粘贴到HTML中的基本相同。

来源

2017-08-23 14:16:42

这对我有用。谢谢你，安德烈马特拉卡鲁！ :) –

md菜单覆盖角2中的默认最大宽度

回答

相关问题