css - 将自定义类添加到 mat-menu
问题描述
我为我的应用程序使用了几个菜单,并为此使用了 angular material mat-menu 组件。我可以通过在我的全局 css 文件中为菜单原始类编写 css 代码来更改所有菜单的样式。但是当我想使用 .custom-class-name .original-material-class-name{} 向其中一个添加一些特定样式时,它不会将这些样式应用于那个菜单。
这是stackblitz中的整个应用程序:app
header.component.html:
<div>
<a mat-button class="theme-menu-toggle-button" *ngIf="!menuAvailable"
(click)="changeSidenavMode(!mode)">
<mat-icon>menu</mat-icon>
</a>
<a href="#" fxHide.lt-md fxShow.gt-sm class="theme-user" mat-button
[matMenuTriggerFor]="menu">
<img src="assets/images/user.png" class="theme-profile-image rounded-circle">
<span class="theme-profile-title">نام نامخانوادگی</span>
</a>
<mat-menu #menu="matMenu" class="profile-menu">
<button mat-menu-item *ngFor="let option of profileOptions">
<mat-icon>{{option.icon}}</mat-icon>
<span>{{option.title}}</span>
</button>
</mat-menu>
样式.css:
.profile-menu .cdk-overlay-pane::before{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 15px solid #5E35B1;
content: " ";
position: absolute;
top: 10px !important;
animation: fadeInRightBig 0.75s;
}
解决方案
在 backgroundClass 的 mat-menu 中添加自定义类:
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" backdropClass="custom__menu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
.custom__menu + * .cdk-overlay-pane > div.mat-menu-panel > div.mat-menu-content {
background-color: #777;
button.mat-menu-item {
color: white;
}
}
推荐阅读
- python - 大写()方法如何在 python/django 中工作?
- javascript - Cocos2d (JS) - 设置 OnLoad() 并具有属性 isPlaying: true 的动画根本没有真正播放
- jestjs - 玩笑 test.each 在名称中具有对象属性
- javascript - 组件中的Angular 7滚动事件重新渲染滚动上的所有组件
- python - 最后 x 行的 Pandas 平均值
- python-3.x - sagemaker 在反序列化时给出 UnicodeDecodeError
- verilog - a[b+1] 和 a[b+1'b1] 的区别
- javascript - 未找到 Webpack 4 ./src 目录
- php - 如何在 Laravel 中使用或在哪里组合结果?
- vue.js - Vue.js:如何创建一个表单,将表单中的输入数据添加到表格中?