Angular 垫菜单边距

Question

我的垫子菜单有问题，我找遍了所有地方，但没有任何效果。 我正在尝试添加一个 margin-top，但从来不支持这个。

navbar-no-mobile.component.html

<div class="pull-right">
  <button class="btn-language" mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon [ngClass]="{'flag-francais': isFrench, 'flag-english': !isFrench}"></mat-icon>
    <a lang="{{language}}">{{language}}
      <fa-icon class="chevron_white" aria-hidden="true" [icon]="faChevronDown"></fa-icon>
    </a>
  </button>
  <mat-menu class="flag-menu" #menu="matMenu">
    <button mat-menu-item (click)="switchToEnglish()">
      <mat-icon class="flag-english"></mat-icon>
      <span lang="english">English</span>
    </button>
    <button mat-menu-item (click)="switchToFrench()">
      <mat-icon class="flag-francais"></mat-icon>
      <span lang="français">Français</span>
    </button>
  </mat-menu>
</div>

navbar-no-mobile.component.scss

/deep/ .cdk-overlay-container .flag-menu {
  margin-top: 4em;
}

我还尝试将 css 放在整体 css ( styles.scss ) 中，并用.cdk-overlay-container反转.flag-menu或使用::ng-deep而不是/deep/但它也不起作用。

Answer 1

这对我有用：

::ng-deep .cdk-overlay-container .flag-menu {
  margin-top: 3rem;
}

检查 stackblitz： https://stackblitz.com/edit/mat-menu-xruuog

如果它不适合您，请为您的代码创建 stackblitz。