Angular材料下拉样式：在CSS中修剪左侧和右侧

Question

我正在尝试使Angular Material Select看起来像基本的下拉列表。我们应用了disableOptionCentering，仍然看到下拉列表选项从左侧和右侧展开（请参见下面的当前图片）。理想的图片应使左右两侧变薄，如何进行此操作？

https://material.angular.io/components/select/overview

<h4>Basic mat-select</h4>
<mat-form-field appearance="outline">
  <mat-label>Favorite food</mat-label>
  <mat-select disableOptionCentering>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

目前看起来是这样：

需要修剪左侧和右侧，边距/或适当地填充为垂直方向

目标图片：

Answer 1

这是他们在材料设计的官方文档中实现它的方式，但是我想您可能需要为此解决一些问题，因为它没有显示材料样式。您可以只添加自定义css以使其像棱角材质一样进行样式设置。

<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

您的问题也在此线程How to show options under select (Angular material 7)?上回答