我有两个下拉菜单，在一个组件(一个页面)中带有不同位置的 Angular 材质，我想为每个组件提供独特的类

Question

由于我的下拉列表的不同位置，我想给他们不同的顶部和左侧(绝对位置(，，

第一个下拉菜单：

<div class="theme">
<button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger (menuClosed)="menuTrigger.focus()" aria-hidden="true">
<mat-icon class="paint-format" svgIcon="core:paint-format"></mat-icon>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<div>
<span class="circle" (click)="toGreen()" style="border-radius: 50%; background-color: green; margin: auto 4px;"></span>
<span class="circle" (click)="toBlue()" style="border-radius: 50%; background-color: blue; margin: auto 4px;"></span>
<span class="circle" (click)="toDark()" style="border-radius: 50%; background-color: brown; margin: auto 4px;"></span>
</div>
</mat-menu>
</div>

第二个下拉列表是：

<div class="smallTheme">
<button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger (menuClosed)="menuTrigger.focus()" aria-hidden="true">
<mat-icon class="paint-format" svgIcon="core:paint-format"></mat-icon>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" xPosition="before">
<div>
<span class="circle" (click)="toGreen()" style="border-radius: 50%; background-color: green; margin: auto 4px;"></span>
<span class="circle" (click)="toBlue()" style="border-radius: 50%; background-color: blue; margin: auto 4px;"></span>
<span class="circle" (click)="toDark()" style="border-radius: 50%; background-color: brown; margin: auto 4px;"></span>
</div>
</mat-menu>
</div>

谁能告诉我如何区分它们以赋予不同的 css 样式？

Answer 1

无需为下拉列表提供额外的类，您可以通过其父组件访问它们。例如

div.theme>button {
...
}

将仅匹配第一个代码片段中的按钮，因为它是具有theme类的div 的直接子级。

同样地

div.smallTheme>button {
...
}

将允许您仅编辑第二个按钮。