如何更改 mat-item-content 中 material 菜单的填充？

Question

我无法更改 mat-menu-content 的填充。我无法通过简单的 css 或 ::ngdeep 访问它。任何想法如何去做？我对 angular 很陌生:(

一切都在里面：

<div class="...">
<mat-menu>
  //The rest of code is here, some *ngFor, sub menu
<mat-menu>

我想将 mat-menu-content padding 设置为 0px，但我无法通过简单的 css 或 ::ngdeep

来实现

.mat-menu-content:not(:empty) {
padding-top: 8px;
padding-bottom: 8px;

}

Answer 1

您可以通过添加

来更改mat-menu-content

::ng-deep .mat-menu-content{
  padding:0px !important;
}

Answer 2

要避免使用 ngdeep，试试这个：

将 class 应用于您的菜单（使用 'class' 输入别名：<mat-menu class="my-class">）
在您的 css 中，覆盖 angular 的 .mat-menu-content:

.my-class .mat-menu-content { padding: 0 !important; }

显然选择你需要的任何填充。这对我有用。

How to change padding in material menu in mat-item-content?