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

Question

I have this HTML code here我这里有这个 HTML 代码

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

The default behaviour of mat-option is using mat-option的默认行为是使用


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

I want to break the long sentence into next line rather than using ... .我想将长句分成下一行，而不是使用... 。 The styling wont work:(样式不起作用:(
I also need to override the font which I tried also using below code, but it wont override我还需要覆盖我也尝试使用下面的代码的字体，但它不会覆盖

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

styling here 在这里做造型

Please help.请帮忙。

Answer 1

You can add this to your CSS:您可以将此添加到您的 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;
}

Answer 2

The reason why your stlying does not work is because the actual options are shown in a overlay which is placed in the <body> .您的 stlying 不起作用的原因是实际选项显示在<body>中的叠加层中。 Therefore the selector component mat-option cannot work, because the options are not placed in the component.因此选择器component mat-option不能工作，因为选项没有放在组件中。

To override any styles that are in the mat-option you better address the class .mat-option and place it into the global styles.scss要覆盖mat-option中的任何 styles，您最好解决 class .mat-option并将其放入全局styles.scss

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

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2021-04-08 09:42:35

解决方案2
2 2021-04-08 09:22:46

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2021-04-08 09:42:35

解决方案2 2 2021-04-08 09:22:46

解决方案1
4 已采纳 2021-04-08 09:42:35

解决方案2
2 2021-04-08 09:22:46