使用mat-menu-item时，如何使mat-icon-button呈现在正确的位置？

Question

当我们将button mat-icon-button与mat-menu关联时，按钮将进一步向左移动。

如果不与mat-menu关联，我们如何将其渲染到相同的位置。

This is a demo.

如果我们将其注释掉：

    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Guides</button>
      <button mat-menu-item>Concepts</button>
      <button mat-menu-item>Tasks</button>
      <button mat-menu-item>Formulas</button>
    </mat-menu>

并替换为：

    <button mat-icon-button>
      <mat-icon>more_vert</mat-icon>
    </button>

我们可以看到没有关联的mat-menu的按钮在何处呈现。

Answer 1

只需翻转元素的顺序：

import { createContext, useContext } from 'react';

export const AuthContext = createContext();

export function useAuth() {
    return useContext(AuthContext);
}