Angular Material：多个垫子菜单 - 当每个菜单都必须不同时如何覆盖它们的宽度？

Question

我有一个情况，应该可以打开多个垫子菜单，问题是它们不能具有相同的宽度。

所以有四个垫子菜单，一个应该是窄的，另一个应该是宽的..我只能使用 ::ng-deep 来改变宽度，但它会影响所有菜单。

我正在寻找不同的解决方案并找到了类似这样的东西：

1. 将 class 添加到 mat-menu 元素：

<mat-menu #menu="matMenu" class="mat-menu-main" xPosition="before">

2. 尝试在其css中做这样的事情：

.mat-menu-panel.mat-menu-main {
  width: 20rem;
  margin-top: 4px;
}

我找到的所有其他解决方案都带有 ::ng-deep，我无法使用它。 有人可以帮我解决这个问题吗？

Answer 1

分配 class 然后使用 class 控制宽度将起作用（这是我使用的方法）。

class 必须在您的全局样式 sheet 中定义，而不是在组件级别。