如何为Angular Material的<mat-list-option>设置自定义高度

失效原因 #

编写的样式不生效核心源于两点：

• Angular默认的视图封装机制会将组件内样式限制在当前组件宿主范围内，默认无法穿透到第三方组件内部生效
• Angular Material的列表项高度通过内置CSS变量统一控制，直接给.mat-list-option写height属性会被组件内部基于变量生成的高优先级固定高度样式覆盖

可生效的实现方案 #

方案1：覆盖组件内置CSS变量（最推荐，无副作用）

这是组件预留的官方自定义入口，覆盖后组件内部的涟漪效果、图标位置、内边距都会自动适配高度，不会出现样式错位：

/* 在你使用<mat-selection-list>的组件样式文件中编写即可 */
/* v15+ 基于MDC重构的新版Material用这段 */
.mat-mdc-list-option {
  --mdc-list-list-item-container-height: 100px;
}

/* v14及更早旧版本Material用这段
.mat-list-option {
  --mat-list-option-height: 100px;
}
*/

方案2：使用::ng-deep穿透选择器（适合需要精细调整内部样式的场景）

注意必须搭配:host前缀限制样式作用域，避免样式泄露污染全局其他页面的列表组件：

:host ::ng-deep .mat-mdc-list-option {
  height: 100px;
}
/* 同步设置内部内容容器高度，避免内容、勾选图标错位 */
:host ::ng-deep .mat-mdc-list-option .mdc-list-item__content {
  min-height: 100px;
  padding: 8px 0; /* 可根据需求自定义内边距 */
}

方案3：全局样式覆盖（适合全项目统一列表项高度的场景）

直接在项目全局样式文件（通常是src/styles.css/src/styles.scss）中编写样式，全局样式不受Angular视图封装限制，无需穿透选择器即可生效：

/* 全局样式文件中编写 */
.mat-mdc-list-option {
  --mdc-list-list-item-container-height: 100px;
}

注意事项 #

不要跳过变量覆盖直接硬改内部元素高度，会导致列表项的选中涟漪、勾选框位置、触摸热区大小错位，交互体验异常。

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