Angular Material 下拉样式：Trim 左侧和右侧 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>

目前看起来是这样的：

需要trim左右边距/或padding适当的垂直

目标图片：

Answer 1

这是他们在 material 设计的官方文档中实现它的方法，但我想您可能需要为此修复一些 css，因为它没有显示 material 样式。您只需添加自定义 css 即可将其设置为 angular material.

样式

<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>

你的问题也在这个帖子中得到了回答

Angular Material 下拉样式：Trim 左侧和右侧 CSS

Angular Material Dropdown Styling: Trim Left and Right Side in CSS

css

typescript

angular-material

angular

angular7