文章内容
2020/5/27 19:03:55,作 者: 黄兵
mat-menu自定义样式 mat-menu自定义宽度
最近在使用mat-menu，自定义这个组件的样式很难（包括宽度，内部的样式等）。
但是如果将 View Encapsulation设置为None，则很容易修改样式，具体代码如下：
@Component({
templateUrl: './my.component.html' ,
styleUrls: ['./my.component.css'],
encapsulation: ViewEncapsulation.None,
})之后自定义样式，mat-men 元素：
<mat-menu #notificationMenu="matMenu" class="mat-menu-panel-override" xPosition="before">
<app-notification-panel></app-notification-panel>
</mat-menu>
自定义样式：
.mat-menu-panel-override {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
border-radius: 4px;
overflow: hidden;
}
.mat-menu-panel-override {
max-width: 100% !important;
}
这样就可以了很容易修改样式了。
Tips:
j将ViewEncapsulation设置为None，Angular将CSS添加到全局样式中。先前讨论的范围规则，隔离和保护不适用。这本质上与将组件的样式粘贴到HTML中相同。
参考资料：
1、md-menu override default max-width in Angular 2
黄兵个人博客原创。
评论列表