android 设备上的 mat-select 和 mat-dialog 闪烁 - Ionic 7 和 Angular 17

Question

我目前正在研究离子项目，并使用了角度框架，但不知何故，垫选择和垫对话框闪烁了几分之一秒。正如您在附件中看到的。

Ionic 7 和 Angular 17 依赖项：

"dependencies": {
    "@angular/animations": "^17.0.2",
    "@angular/cdk": "^17.0.4",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/forms": "^17.0.2",
    "@angular/material": "^17.0.4",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",
    "@angular/router": "^17.0.2",
    "@capacitor/android": "5.6.0",
    "@capacitor/app": "5.0.6",
    "@capacitor/browser": "^5.1.0",
    "@capacitor/core": "5.6.0",
    "@capacitor/device": "^5.0.6",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/keyboard": "5.0.7",
    "@capacitor/network": "^5.0.6",
    "@capacitor/preferences": "^5.0.6",
    "@capacitor/share": "^5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/angular": "^7.0.0",
    "chart.js": "^4.4.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  }

global.scss

/* Basic CSS for apps built with Ionic */
@import "@ionic/angular/css/normalize.css";
@import "@ionic/angular/css/structure.css";
@import "@ionic/angular/css/typography.css";
@import "@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import './assets/fonts/icons/material-icon.scss';
@import "@ionic/angular/css/padding.css";
@import "@ionic/angular/css/float-elements.css";
@import "@ionic/angular/css/text-alignment.css";
@import "@ionic/angular/css/text-transformation.css";
@import "@ionic/angular/css/flex-utils.css";
@import "@angular/material/prebuilt-themes/indigo-pink.css";

当前结果：

尝试在global.scss中为下面的类设置z-index

@import "@angular/material/prebuilt-themes/indigo-pink.css";


.cdk-global-overlay-wrapper,
.cdk-overlay-container {
    z-index: 99999 !important;
}

但在真实设备中没有任何效果。

如有任何帮助，我们将不胜感激。

Answer 1

如果发现样式冲突，请提高针对 mat-select 和 mat-dialog 元素的选择器的特异性。例如，使用更具体的选择器（如

.cdk-global-overlay-wrapper

）代替

ion-app .cdk-global-overlay-wrapper

。 使用

!important

标志时要小心。它可以快速解决冲突，但过度使用可能会产生维护问题。首先以结构良好的选择器为目标。