如何为mat-autocomplete的mat-option应用样式并设置滚动下拉列表

问题说明 #

尝试为mat-autocomplete的mat-option应用自定义CSS样式未生效，同时需要将下拉列表设置为仅显示单个选项且支持滚动，参考相关方案后仍未解决。

现有代码 #

HTML 文件（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>

CSS 文件（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;
}

解决步骤 #

1. 修复mat-option样式不生效问题 #

Angular组件默认启用样式封装，直接在组件CSS中编写mat-option选择器无法穿透到Material的子组件，可通过以下两种方式解决：

方式一：使用::ng-deep穿透样式

修改CSS代码，添加::ng-deep前缀强制穿透样式封装，同时修正无效的CSS属性：

::ng-deep .mat-option {
  height: 50px !important;
  background-color: red;
  color: white; /* 修正文字颜色，避免与背景色冲突 */
}

::ng-deep .mat-option-text {
  text-emphasis: none; /* 替换非标准属性text-emphasis-color */
}

方式二：关闭组件样式封装

在组件的TypeScript文件中，设置ViewEncapsulation.None关闭样式封装，同时为样式添加专属类名避免全局污染：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-autocomplete-filter',
  templateUrl: './autocomplete-filter-example.html',
  styleUrls: ['./autocomplete-filter-example.css'],
  encapsulation: ViewEncapsulation.None
})
export class AutocompleteFilterExampleComponent {
  // 组件逻辑代码
}

修改CSS，添加类名限定：

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

.example-autocomplete .mat-option-text {
  text-emphasis: none;
}

并给mat-autocomplete添加对应类名：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" class="example-autocomplete">

2. 配置下拉列表仅显示单个选项并支持滚动 #

通过设置mat-autocomplete-panel的最大高度，使其刚好容纳一个mat-option，超出部分自动滚动：

/* 配合::ng-deep使用 */
::ng-deep .mat-autocomplete-panel {
  max-height: 50px !important; /* 与mat-option的height保持一致 */
  overflow-y: auto;
}

/* 若关闭样式封装，使用类名限定 */
.example-autocomplete .mat-autocomplete-panel {
  max-height: 50px;
  overflow-y: auto;
}

内容的提问来源于stack exchange，提问作者g999