Angular 13升级至15后Angular Material样式异常求助

先检查依赖兼容性 #

你的@angular/flex-layout仍停留在13.0.0-beta.38，建议升级到与Angular 15兼容的版本（如15.x分支），版本不匹配可能引发额外样式冲突。

问题1：mat-menu-item聚焦边框+无法覆盖背景字体 #

在global.scss中添加以下样式，移除聚焦边框并确保菜单选项层级与背景正常：

/* 移除菜单选项的聚焦边框 */
.mat-mdc-menu-item:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 提升菜单面板层级，避免被下方内容遮挡 */
.mat-mdc-menu-panel {
  z-index: 1000 !important;
}

/* 确保菜单选项背景不透明，覆盖下方字体 */
.mat-mdc-menu-item {
  background-color: #ffffff !important; /* 替换为你的菜单主题背景色 */
}

问题2：matInput输入框异常灰色背景 #

Angular Material 15切换到MDC组件库后，输入框默认带有浅色背景，全局重置即可：

/* 重置输入框元素背景 */
.mat-mdc-input-element {
  background-color: transparent !important;
}

/* 若表单容器也有背景，同步重置 */
.mat-mdc-form-field .mat-mdc-form-field-flex {
  background-color: transparent !important;
}

问题3：部分matTooltip hover闪烁 #

闪烁多由hover事件冲突或overlay层级问题导致，尝试以下样式调整：

/* 禁止tooltip容器响应鼠标事件，避免干扰触发逻辑 */
.cdk-overlay-container .mat-mdc-tooltip {
  pointer-events: none;
}

/* 提升tooltip层级，避免被其他元素遮挡引发闪烁 */
.cdk-overlay-pane.mat-mdc-tooltip-panel {
  z-index: 10000 !important;
}

另外排查闪烁tooltip的父元素，是否存在pointer-events: none或频繁样式动画，这类情况也会导致hover状态不稳定。

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