如何仅当bottom属性为负值时为cdk-overlay-pane应用指定CSS样式

极简纯CSS方案（推荐） #

利用CSS max() 函数的自动取值特性，无需额外逻辑判断：当元素原bottom值为负时，最终取0；原bottom为正时，保留原有值。同时绑定自定义面板类避免全局影响其他组件的弹出层：

1. 给mat-select添加自定义面板类

<mat-select panelClass="custom-select-pane">
  <!-- mat-option选项内容 -->
</mat-select>

2. 样式代码修改为：

::ng-deep .cdk-overlay-pane.custom-select-pane {
  bottom: max(0px, var(--cdk-overlay-bottom, auto)) !important;
}

提示：如果你的项目需要兼容Chrome < 79、Safari < 13.1版本，建议直接使用脚本方案，这些版本不支持CSS max()函数传入动态计算值。

全兼容脚本方案 #

无浏览器版本限制，逻辑可控性更高：

1. 给mat-select绑定打开事件与模板引用

<mat-select #selectRef (openedChange)="handlePanelOpen($event, selectRef)">
  <!-- mat-option选项内容 -->
</mat-select>

2. 组件类中添加判断逻辑

import { MatSelect } from '@angular/material/select';

// ...类内部方法
handlePanelOpen(isOpened: boolean, select: MatSelect) {
  if (!isOpened) return;
  const overlayPane = select.panel.nativeElement.closest('.cdk-overlay-pane') as HTMLElement;
  const computedBottom = parseFloat(getComputedStyle(overlayPane).bottom);
  overlayPane.classList.toggle('bottom-fix-zero', computedBottom < 0);
}

3. 对应样式代码

::ng-deep .cdk-overlay-pane.bottom-fix-zero {
  bottom: 0px !important;
}

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