为 mat-autocomplete 的 mat-option 添加样式答案

【问题标题】：adding style to mat-option of mat-autocomplete为 mat-autocomplete 的 mat-option 添加样式
【发布时间】：2021-07-04 03:10:12
【问题描述】：

我有这个 HTML code here

<div style="width: 150px">
  <form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>
</div>

mat-option 的默认行为是使用


  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis

我想将长句分成下一行，而不是使用 ... 。样式不起作用:(
我还需要覆盖我也尝试使用下面代码的字体，但它不会覆盖

mat-option {
    font-family: "Times New Roman", Times, serif; // does not work
  }

styling here

请帮忙。

【问题讨论】：

标签： html css angular sass angular-material

【解决方案1】：

您的 stlying 不起作用的原因是实际选项显示在 <body> 中的叠加层中。因此选择器component mat-option 不能工作，因为选项没有放在组件中。

要覆盖mat-option 中的任何样式，您最好寻址.mat-option 类并将其放入全局styles.scss

.mat-option {
   font-family: "Times New Roman", Times, serif; // ?
}

【讨论】：

任何关于换行符的帮助，而不是其中的...
抱歉，这对于简短的回答来说有点更多的样式，您需要一起编辑 .mat-option 和 .mat-option-text 的行为。
@User985614：white-space: wrap; text-overflow: initial; 不工作吗？
那么就是行高，选项高度，还有很多事情要做。我建议增加更多的空间，而不是试图改变材料。使用panelWidth: string | number 输入。

【解决方案2】：

您可以将其添加到您的 CSS：

.mat-option{
  word-wrap:break-word !important;
  white-space:normal !important;
  font-family: "Times New Roman", Times, serif;
}

.mat-option-text{
  line-height:initial !important;
}

【讨论】：