如何在 mat-item-content 的材质菜单中更改填充？

Question

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

一切都在里面：

<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

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

1. 将类应用到您的菜单（使用“类”输入别名：<mat-menu class="my-class">）

2. 在您的 css 中，覆盖 angular 的 .mat-menu-content：

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

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

Answer 2

您可以通过添加更改mat-menu-content

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

工作demo