I have two dropdown menu with Angular Material in one component (one page) with different positions, and I want give unique classes to each

Because of diffrent positions of my dropdowns I want to give different top and left to them(with absolute position), but Angular Material create them before body end tag (</body>) and with same classes, and I can’t give unique classes to right tags,

First dropdown:

<div class="theme">
                            <button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger (menuClosed)="menuTrigger.focus()" aria-hidden="true" style="position: absolute; right: 299px; top: -7px;">
                                <mat-icon class="paint-format" svgIcon="core:paint-format" style="width: 21px; height: 22px;"></mat-icon>
                            </button>
                            <mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="theme">
                                <div>
                                    <span class="circle" (click)="toGreen()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: green; margin: auto 4px;"></span>

                                    <span class="circle" (click)="toBlue()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: blue; margin: auto 4px;"></span>

                                    <span class="circle" (click)="toDark()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: brown; margin: auto 4px;"></span>
                                </div>
                            </mat-menu>
                        </div>

And second dropdown is:

<div fxFlex="35" class="smallTheme">
                                <button mat-icon-button [matMenuTriggerFor]="menuSmall" #menuTrigger (menuClosed)="menuTrigger.focus()" aria-hidden="true" style="">
                                    <mat-icon class="paint-format" svgIcon="core:paint-format" style="width: 21px; height: 22px;"></mat-icon>
                                </button>
                                <mat-menu #menuSmall="matMenu" [overlapTrigger]="false" xPosition="before" panelClass="smallTheme" class="small" [class]="'custom'">
                                    <div>
                                        <span class="circle" (click)="toGreen()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: green; margin: auto 4px;"></span>
                                        <span class="circle" (click)="toBlue()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: blue; margin: auto 4px;"></span>
                                        <span class="circle" (click)="toDark()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: brown; margin: auto 4px;"></span>
                                    </div>
                                </mat-menu>
                            </div>

Source: New feed
Source Url I have two dropdown menu with Angular Material in one component (one page) with different positions, and I want give unique classes to each