Angular 12 中 mat-menu 的位置问题

Question

我创建了一个可用的垫子菜单（菜单出现）但它没有出现在使它出现的按钮下方... 你知道如何解决这个问题吗？我应该用 CSS 还是用 npm install 中的组件修复它？

列表-members.component.html

<button mat-icon-button [matMenuTriggerFor]="menu">
 <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" yPosition="below" xPosition="after">
 <button mat-menu-item (click)="deleteMember(member.IdProjectMember)">
  <mat-icon>dialpad</mat-icon>
  <span>Supprimer le membre</span>
 </button>
</mat-menu>

list members img

app.module.ts

import { NgModule } from '@angular/core';
import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';

@NgModule({
  exports:[
    MatDialogModule,
    MatInputModule,
    MatMenuModule,
    
  ],
  ...
  ],
  imports: [
    MatDialogModule,
    MatInputModule,
    MatMenuModule,

  ],
 
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

尝试在 angular.json 中添加 Material 主题：

        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
          "src/styles.scss"
        ],

预建主题：https://material.angular.io/guide/theming#using-a-pre-built-theme

Angular 12 中 mat-menu 的位置问题

position problem with mat-menu in Angular 12

html

css

position

angular

angular12