角度材质按钮内容未对齐

Question

在这个角度组件中，我尝试使用垫子按钮显示搜索将过滤的不同类别，但是当我展开选项时，它们不会出现在垫子按钮下方，而是显示在左侧页面。

This is a link to the example I was trying to follow

这是组件的 HTML

<div class="section categories" id="searchBtnContainer" >
   <input id="searchInput" onkeyup="filterSearch()" class="form-control form-control-dark w-50" 
type="text" placeholder="Search for a system" aria-label="Search">

   <button mat-button id="categorySelection" [matMenuTriggerFor]="menu">Menu</button>
   <mat-menu #menu="matMenu">
     <button mat-menu-item>Item 1</button>
     <button mat-menu-item>Item 2</button>
   </mat-menu>
</div>

这是组件的 CSS

.section {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
    /*  display: flex;
      flex-direction: row;*/
    }

.categories {
  justify-content: center;
  display: flex;
  flex-direction: row;
  margin: 2em .5em 1em .5em;
}

#searchInput{
  margin-right: .5em !important;
}

#categorySelection{
  margin-left: .5em !important;
}


button.active{
  color: white;
  background-color: #03A9F4;
}


.selector{
  background-color: white;
  margin-right: .5em;
  margin-left: .5em;
  text-decoration: none;
  padding:0.35em 1.2em;
  border-style: solid;
  border-width: 0.1em;
  border-color: #03A9F4;
  border-radius: 5px;
}

.selector:hover{
  color: white;
  background-color: #03A9F4;
}


body {
  font-family: Lato;

}

.fill-space {
  flex: 1 1 auto;
}

这是单击按钮时发生的情况的屏幕截图。我正在尝试让 Item1、Item2 直接显示在菜单按钮下

Answer 1

您必须导入材质主题 css，例如 stackblitz

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';