如何增加mat-menu-item的宽度？

Question

<div fxHide fxHide.xs="false" fxHide.md="true">
  <button mat-icon-button [matMenuTriggerFor]="menu" class="my-menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-4" (click)="repoService.onToolbarClick(menu)"
    class="notifications-dropdown">

      <mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
      <span class="notification-row">{{menu.displayKey | translate}}</span>

    </button>
  </mat-menu>

CSS文件

.mat-menu-panel.notifications-dropdown {
      max-width:none;
      width: 100vw; 
      margin-left: -8px;
      margin-top: 24px;
      overflow: visible;
  }
  
  .notification-row{
      width: 424px;
  }
    

我已经尝试过这个方法，但它对我没有用！

如何在Angular 2中覆盖md-menu的默认最大宽度

- Siju Samson

---

你的 CSS 是什么？ - codeVerses

我没有实现任何CSS代码，这实际上是我面临的问题。我正在使用SCSS。我不明白如何增加菜单项的宽度？ - Siju Samson

你尝试在你的 SCSS 文件中添加样式了吗？ - yer

我已经添加了我的 SCSS 文件。 - Siju Samson

Answer 1

我曾遇到同样的问题，通过覆盖mat-menu-panel的最大宽度属性来解决了这个问题：

我也遇到了同样的问题，并通过覆盖mat-menu-panel的最大宽度属性解决了它：

::ng-deep.mat-menu-panel {
  max-width: none !important;
}

希望它能帮到你

- gil

---

这个不起作用。 - Mitulát báti

Answer 2

https://material.angular.io/components/menu/api

@Input('class') panelClass: string

此方法获取设置在宿主mat-menu元素上的类，并将它们应用于显示在覆盖容器中的菜单模板。否则，从组件外部样式化包含菜单会变得困难。

<mat-menu class="my-class" ... >

组件CSS（由于使用cdk-overlay需要ng-deep）：

::ng-deep {.mat-menu-panel.my-class { width: 400px; } }

- Stefan Norberg

---

这似乎有问题。我尝试了一下，类已被应用，但是我的类上的CSS不在里面。 https://stackblitz.com/edit/angular-extauy?file=src%2Fapp%2Fmenu-overview-example.html - Worthy7

当使用Chrome 91查看您的StackBlitz时，下拉菜单是粉色的？你说什么是坏了的？如果你想要样式化按钮，那是一个独立的元素。 - Stefan Norberg

是的，现在似乎可以工作了，我发誓之前它是坏的。是 Chrome 还是 Angular 更新了？ - Worthy7

如果您将样式添加到styles.css中，它就会起作用。 如果您想将样式保留在父组件的css文件中，则必须使用ng-deep，例如 :: ng-deep .mat-menu-panel.my-class {...}。 - Andrei Cojea

如果您使用自定义类，则可以在不覆盖 mat-menu 中的其他元素的情况下使其正常工作。 - DJG22

澄清了 ng-deep 的必要性。 - Stefan Norberg

Answer 3

注意：我使用的是Angular 7，虽然这与Angular 2有关，但我希望有人能从中受益。

我还需要将菜单设置为固定宽度，但后来我发现菜单的宽度是从内容中获取的。

因此，你可以创建一个不属于Angular Material的元素，并为该元素设置宽度。例如...

<div class="ProfileBar">
  <mat-icon [matMenuTriggerFor]="profileMenu"class="ProfileImage">account_circle</mat-icon>

  <mat-menu #profileMenu="matMenu">
    <div class="ProfileInfo">
      <mat-icon class="ProfileInfo-user-icon">account_circle</mat-icon>
      <p class="full-name">Some full name</p>
       <p class="nickname">@SomeNickname</p>
    </div>

    <button (click)="logout()" mat-menu-item>Logout <mat-icon>exit_to_app</maticon></button>
  </mat-menu>
</div>

这里有一个名为ProfileInfo的类，你可以像这样正常地设置宽度：.ProfileInfo { width: 300px } 或类似的东西。那将给菜单它的宽度，而mat-menu-items会跟随该宽度。你甚至不需要使其功能性，它只能是这样的。

  <mat-menu #profileMenu="matMenu">
    <div class="ClassOnlyForTheWidth"></div>
  </mat-menu>

这就是全部内容。

另外，我不知道这是否对您有用，您可以通过使用[class]="'MyClass'"来完全删除材料样式。这将彻底删除材料样式，并根据您使用的浏览器，在没有任何样式的情况下呈现按钮元素。如果您然后执行此操作：[class]="'MyClass mat-menu-item'"，它将返回菜单项（或任何Angular组件）的样式，但这会带来整个stackoverflow线程的问题。

享受吧，希望这能帮助到某些人。

- Mario Škrlec

Answer 4

在 Angular 12 中的 CSS 页面上，以下内容适用于我，因为它使宽度根据动态内容灵活适应，并保持菜单对齐。

::ng-deep.mat-menu-panel {
  max-width:fit-content !important;
}

- Ambar Prajapati

---

这对我来说是最好的答案，它起作用了。我也正在使用12。 - Maccurt

Answer 5

为单独的菜单设置样式，需在<mat-menu>中添加一个附加类，并更改宽度。此方法适用于Angular 9：

<button mat-stroked-button [matMenuTriggerFor]="myMenu">Open Menu</button>
<mat-menu #myMenu="matMenu" class="my-menu">
  <button mat-menu-item>Approve</button>
  <button mat-menu-item>Reject</button>
</mat-menu>

::ng-deep .my-menu {
    width: 190px;
}

- Benjamin Freitag

---

这个实现对我来说不起作用。::ng-deep已经被弃用了。Stackblitz？ - ChumiestBucket

Angular组件样式指出：_在那之前，应该优先使用::ng-deep以获得更广泛的工具兼容性。_请访问https://stackblitz.com/edit/angular-9-menu-width以获取更多信息。 - Benjamin Freitag

Answer 6

使用 Angular Material 15，现在已经变成了：

::ng-deep {  
  .mat-mdc-menu-panel {  
    max-width: unset !important;  
  }  
}

mat-menu-panel已更改为mat-mdc-menu-panel

- JayDee

Answer 7

这里大多数答案列出了已弃用的::ng-deep方法。同样适用于!important的使用，只有在其他方法都失败时才应该使用。

正如许多人指出的那样，主要问题是Google设置了max-width属性。对我而言，以下方法通过将其添加到我的Angular 15应用程序的全局SCSS中得以解决：

.cdk-overlay-pane {
  div.mat-mdc-menu-panel {
    max-width: none;
  }
}

要更改特定菜单的宽度，您可以将所有元素包裹在具有特定宽度的容器中，菜单将随该容器一起增长。

<mat-menu #menu="matMenu" yPosition="below" id="app-notifications-menu">
  <div id="my-menu-container">
    <button mat-menu-item>
      <mat-icon>dialpad</mat-icon>
      <span>Redial</span>
    </button>
  </div>
</mat-menu>

在组件的CSS中，你只需要设置你喜欢的宽度： #my-menu-container { width: 400px; }

- TomDK

---

谢谢！我在网上搜索了很多，你的回答是唯一有效的！干杯！ - YFDev

谢谢！我一直在浏览互联网，你的回答是唯一有效的！干杯！ - undefined

Answer 8

可以按照以下方式完成：

//.my-menu is the class of my mat-menu
::ng-deep .cdk-overlay-pane .my-menu {
    min-width: 450px;
}

或者

//.my-menu is the class of my mat-menu
::ng-deep .cdk-overlay-container .my-menu {
    max-width: none !important;
}

- H S W

---

你的回答的第一部分对我有用。谢谢！ - Mitulát báti

Answer 9

 <div fxHide fxHide.xs="false" fxHide.md="true">
            <button mat-icon-button [matMenuTriggerFor]="menu">
                <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-40" (click)="repoService.onToolbarClick(menu)">
                    <mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
                    <span class="ml-8">{{menu.displayKey | translate}}</span>
                </button>
            </mat-menu>
        </div>

• 我们只需要进行一个小改动（class="mr-40"），mr代表右边距，mr是2的倍数，因此我们可以根据需要增加宽度。

- Siju Samson

Answer 10

你需要重写 .mat-menu-panel 上的 max-width。

HTML

<mat-menu class="menu">

CSS

.menu {
  width: 121px;
  max-width: 500px !important;
}

- Джим Гольман