将样式添加到 mat-autocomplete 的 mat-option

Question

我的autocomplete-filter-example.html文件：

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Assignee</mat-label>
    <input
      type="text"
      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>

和autocomplete-filter-example.css

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

.mat-option {
  height: 50px;
  background-color: red;
  color: red;
}

.mat-option-text {
  text-emphasis-color: red;
}

如何让 css 样式应用于mat-option ？ 另外，如何将下拉选择列表设置为可滚动并且一次只显示一个选项？

此处的样式示例

试图遵循类似问题的最佳答案，但它似乎不起作用。

Answer 1

尝试将encapsulation: ViewEncapsulation.None,添加到您的组件装饰器中：

@Component({
  selector: 'some-component',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss'],
  encapsulation: ViewEncapsulation.None,
})

Answer 2

<mat-autocomplete #auto="matAutocomplete" class = "test-class" classlist="test-class">

如果您仍想在组件 css 文件中执行此操作，则可以使用 ::ng-deep

::ng-deep .test-class {
  background-color: blue;
}