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

【问题标题】：Angular Material Dropdown Styling: Trim Left and Right Side in CSSAngular 材质下拉样式：在 CSS 中修剪左侧和右侧
【发布时间】：2019-12-05 17:28:50
【问题描述】：

我试图让 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>

目前看起来是这样的：

需要适当修剪左右边距/或内边距以保持垂直

目标图片：

【问题讨论】：

如果你使用
正确，这就是我正在尝试的，修改原生版本看起来像上面的理想图片，由于某种原因它看起来不像那样，即使 UX 团队使用 Adobe Angular 材料构建了这个，确定选项存在

标签： css angular typescript angular-material angular7

【解决方案1】：

这就是他们在材料设计的官方文档中实现它的方式，但我想你可能需要为此修复一些 CSS，因为它没有显示材料样式。您可以添加您的自定义 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)?得到了回答

【讨论】：