如何避免角度垫板位置变化对 matdialog 的影响答案

【问题标题】：How to avaoid angular mat-panel postion change affect to matdialog如何避免角度垫板位置变化对 matdialog 的影响
【发布时间】：2021-06-09 17:48:55
【问题描述】：

我在我的 Angular 项目中使用了 Matmenu 和 MatDialogModule。我想改变mat-menu 的位置。此外，我使用以下 sn-p 添加到 .scss 文件来做到这一点。


::ng-deep .cdk-overlay-pane {
    transform: translate(78%, 10%);
  }

但是，这也会导致我的对话框面板的位置发生变化。我向mat-menu 添加了课程并尝试做同样的事情，结果并没有什么不同。

 <mat-menu  #menu="matMenu" class="kebab-mat-menu" >
                  <button mat-menu-item (click)="deleteClinic(clinicData)">
                    <mat-icon>delete</mat-icon>
                    <span>Delete</span>
                  </button>
  </mat-menu>

   .kebab-mat-menu{
       ::ng-deep .cdk-overlay-pane {
         transform: translate(78%, 10%) !important;
  }
}

我的问题是如何将此样式仅添加到mat-menu 谢谢。

【问题讨论】：

标签： css angular sass angular-material

【解决方案1】：

您的问题是因为您使用 ::ng-deep。您可以在 devtools 中看到“css 泄漏”。

我使用的解决方案（我不确定它的正确方法）是在styles.css中编写角度材质的样式，并为材质对话框等添加特殊规范。

他们写道，解决方案是： “您可以将这些元素的样式定义为全局样式”。

【讨论】：