Angular Material升级至v15后ng2-tel-input的CSS层级问题

问题原因 #

Angular Material 15对cdk-overlay组件的默认z-index基准值做了调整，整体层级高于Material 14版本。而停止维护的ng2-tel-input组件未适配这一变化，其下拉框的z-index值低于Material组件的overlay层级，导致下拉框被遮挡。

解决方案 #

1. 强制提升ng2-tel-input下拉框的z-index（推荐）

由于Angular的样式隔离机制，需要通过全局样式或::ng-deep穿透组件样式，为下拉框设置足够高的z-index：

/* 在组件的styles文件中使用::ng-deep */
::ng-deep .country-list {
  z-index: 10000 !important;
  position: fixed !important; /* 确保下拉框脱离当前定位上下文，避免父元素层级限制 */
}

/* 或者在全局styles.scss/styles.css中直接添加 */
.country-list {
  z-index: 10000 !important;
  position: fixed !important;
}

注：Material 15中cdk-overlay-container的默认z-index为1000，设置10000可确保下拉框处于顶层。

2. 调整Material全局overlay层级（不推荐）

如果第一种方法无效，可尝试降低Material所有overlay组件的层级，但此操作可能影响对话框、下拉菜单等其他Material组件的显示，需谨慎使用：

/* 在全局styles.scss/styles.css中添加 */
.cdk-overlay-container {
  z-index: 9000 !important;
}

3. 给ng2-tel-input打本地补丁（适合长期维护）

若项目需长期依赖该组件，可通过修改源码并生成补丁的方式永久解决：

1. 找到node_modules/ng2-tel-input/src/assets/styles.css，修改.country-list的z-index为10000
2. 安装补丁工具：npm install patch-package --save-dev
3. 生成补丁：npx patch-package ng2-tel-input
4. 后续执行npm install时，补丁会自动应用到ng2-tel-input组件

额外检查点 #

• 确认ng2-tel-input的父元素未设置overflow: hidden，否则下拉框会被裁剪
• 检查父元素是否设置了position: relative且z-index较低，若有则调整父元素的z-index或移除不必要的定位

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