如何覆盖Material List组件mat-list-text类的overflow样式

Angular 默认开启了视图样式封装，同时Angular Material 内置样式优先级较高，是导致自定义覆盖.mat-list-text的overflow: visible不生效的核心原因，可通过以下几种方案解决：

• 方法1：使用::ng-deep（影响范围可控，推荐）
  在当前组件的样式文件中添加如下代码，配合:host限定仅当前组件内生效，避免全局污染：

:host ::ng-deep .mat-list-text {
  overflow: visible !important;
}

注：::ng-deep目前被Angular官方标记为废弃状态，但暂无明确的移除时间表，v16+版本仍可正常使用，如果介意该API状态可选择另外两种方案。

• 方法2：关闭当前组件视图封装
  在组件的@Component装饰器中添加encapsulation配置，关闭样式隔离：

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

@Component({
  // 其余原有配置保持不变
  encapsulation: ViewEncapsulation.None
})

为了避免影响全局其他列表组件，建议给当前使用的mat-list添加自定义类名（例如custom-mat-list），再配合类名限定样式范围：

.custom-mat-list .mat-list-text {
  overflow: visible;
}

• 方法3：全局样式文件中配置
  在项目全局样式文件（通常为styles.scss/styles.css）中添加样式，同样建议配合自定义类名限定范围，避免修改全局所有列表的默认表现。

你遇到的异常效果参考：

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