mat-option 出现在页面底部，而不是出现在 mat-select 下

Question

我想创建一个下拉菜单，一切正常，但我的“mat-option”出现在页面末尾，我不知道为什么。 请解释一下我做错了什么？

<mat-form-field appearance="fill">
    
          <mat-select [(ngModel)]="this.selectedValue" name="food">
            <mat-option *ngFor="let food of foods" [value]="food.value">
              {{food.viewValue}}
            </mat-option>
          </mat-select>
    
        </mat-form-field>

我的 css：

mat-form-field {
  font-size: inherit;
  font-weight: 400;
  line-height: 1.125;
  font-family: Roboto,Helvetica Neue,sans-serif;
  letter-spacing: normal;
  border: 2px solid silver;
  border-radius: 10px;
  height: 40px;
  width: 100%;
  position: relative;
  top: 50px;
}



mat-select {
  display: inline-table;
  cursor: pointer;
  position: inherit;
  position: relative;
  top: 0;
  left: 0;
  border-radius: 5px;
  box-sizing: border-box;
}

mat-option {
  font-size: inherit;
  font-weight: 400;
  font-family: Roboto,Helvetica Neue,sans-serif;
  border: 2px solid silver;
  border-radius: 10px;
  height: 40px;
  position: relative;
  top: 0;
  left: 0;
  width: 92%;
}

我有的：

我希望这样：

Answer 1

@DocziSlizard，谢谢。 我添加了导入“~@angular/material/prebuilt-themes/indigo-pink;css”。 到我的 style.css，它解决了我的问题！

@import "~@angular/material/prebuilt-themes/indigo-pink.css";