Angular Material 16.1.6中.mat-list-item样式修改无效问题排查

你遇到的问题核心是Angular Material 15及以后版本全面迁移到了MDC（Material Design Components）架构，原有的.mat-list-item、.mat-list-item-content这类旧类名已经被替换为带mdc前缀的新类名，导致你的选择器根本匹配不到DOM元素，所以即使加了!important也不会生效。

修正后的全局样式代码如下：

@use '@angular/material' as mat;
@import '@angular/material/prebuilt-themes/indigo-pink.css';

// mat-list-item 样式调整
.mat-mdc-list-item .mdc-list-item__content {
  display: flex;
  align-items: center;
}

补充说明： #

• 不需要强制加!important：全局样式文件（styles.scss）中的样式优先级足够覆盖主题默认样式，除非遇到权重更高的嵌套选择器，此时再考虑使用!important。
• 验证类名的方法：打开浏览器开发者工具（F12），选中mat-list-item元素，查看它实际应用的类名，确认是否为.mat-mdc-list-item，其内部内容容器的类名是否为.mdc-list-item__content。

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