Angular项目MatSnackBar无样式、位置异常配置不生效问题求助

故障现象 #

• 调用MatSnackBar的open方法后，DOM可正常生成对应元素，但无配套样式（无背景色、位置错误，表现为左下角普通块级元素）
• open方法传入的配置参数完全不生效
• 更换其他snackbar插件故障完全相同，可排除插件本身问题
• 已尝试将触发逻辑放入NgZone执行，无效果
• 实际显示效果：
  

相关代码 #

触发snackbar的服务代码 #

import {MatSnackBar} from '@angular/material/snack-bar';
import {NgZone, Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SnackbarService {

  constructor(private snackBar: MatSnackBar,
              private zone: NgZone) { }

  openSuccess(msg: string): void {
    this.zone.run(() => {
      this.snackBar.open(msg, null, {duration: 3000, verticalPosition: 'top', horizontalPosition: 'center', });
    });
  }

  openError(msg: string): void {
    this.zone.run(() => {
      this.snackBar.open(msg, null, {duration: 3000, verticalPosition: 'top', horizontalPosition: 'center'});
    });
  }
}

package.json配置 #

{
  "name": "drexter-front",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "~11.0.0",
    "@angular/material": "^11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@datorama/akita": "^6.1.3",
    "firebase": "^8.6.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.0",
    "@angular/cli": "~11.0.0",
    "@angular/compiler-cli": "~11.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.6.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

app.module.ts配置 #

import { BrowserModule } from '@angular/platform-browser';
import {NgModule} from '@angular/core';


import {firebaseConfig} from '../environments/environment';

import {AngularFireFunctionsModule, REGION} from '@angular/fire/functions';
import {AppComponent} from './app.component';
import {FooterComponent} from './shared/components/footer/footer.component';
import {HomeComponent} from './pages/home/home.component';
import {AlmondCancellationComponent} from './pages/almond-cancellation/almond-cancellation.component';
import {PenaltyDiscountsComponent} from './pages/penalty-discounts/penalty-discounts.component';
import {SocialServicesRequestsComponent} from './pages/social-services-requests/social-services-requests.component';
import {HeaderComponent} from './shared/components/header/header.component';
import {PricingComponent} from './pages/pricing/pricing.component';
import {AidAndSubsidiesComponent} from './pages/aid-and-subsidies/aid-and-subsidies.component';
import {CustomInputComponent} from './shared/utils/custom-input/custom-input.component';
import {ProfileComponent} from './pages/profile/profile.component';
import {CustomButtonComponent} from './shared/utils/custom-button/custom-button.component';
import {FormSectionComponent} from './shared/components/form-section/form-section.component';
import {CustomRadioComponent} from './shared/utils/custom-radio/custom-radio.component';
import {DropzoneDirective} from './shared/directives/dropzone.directive';
import {CancellationProcessComponent} from './pages/almond-cancellation/cancellation-process/cancellation-process.component';
import {NewsletterComponent} from './shared/components/newsletter/newsletter.component';
import {LoginComponent} from './pages/login/login.component';
import {FormsModule} from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {AngularFireModule} from '@angular/fire';
import {AngularFireAnalyticsModule} from '@angular/fire/analytics';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {AngularFireStorageModule} from '@angular/fire/storage';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    AlmondCancellationComponent,
    PenaltyDiscountsComponent,
    SocialServicesRequestsComponent,
    AidAndSubsidiesComponent,
    PricingComponent,
    ProfileComponent,
    CustomInputComponent,
    CustomButtonComponent,
    NewsletterComponent,
    LoginComponent,
    CancellationProcessComponent,
    FormSectionComponent,
    DropzoneDirective,
    CustomRadioComponent
  ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        BrowserAnimationsModule,
      MatSnackBarModule,
      MatProgressSpinnerModule,
      AngularFireModule.initializeApp(firebaseConfig),
      AngularFireAnalyticsModule,
      AngularFireAuthModule,
      AngularFireStorageModule,
      AngularFireFunctionsModule
    ],
  providers: [{ provide: REGION, useValue: 'europe-west1' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

排查解决方案 #

按优先级依次尝试：

1. 引入Angular Material全局主题
   这是最常见的故障原因，当前配置未引入Material主题，所有组件样式都依赖全局主题。在全局样式文件（通常为styles.scss/styles.css）中添加如下代码即可：

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

2. 检查全局样式覆盖规则
   如果已经引入主题，打开浏览器开发者工具查看生成的snackbar元素样式，排查是否有通配符样式、全局标签样式带!important强制覆盖了Material自带的样式规则，定位到覆盖来源后修改即可。
3. 修复Overlay容器挂载规则
   Material弹出类组件默认挂载在body下，若项目自定义了Overlay挂载容器、或者body/上层容器有overflow: hidden类规则，也会导致定位失效。可在app.module.ts中强制指定挂载位置：

   // 首先引入依赖
   import {OverlayModule, OverlayContainer} from '@angular/cdk/overlay';
   
   // imports数组中加入OverlayModule
   // providers数组中新增配置
   {provide: OverlayContainer, useFactory: () => new OverlayContainer(document.body)}
   

4. 统一依赖版本
   当前@angular/material版本与其他Angular核心包版本范围存在差异，可统一版本避免兼容问题：

   npm install @angular/material@11.0.0 --save
   

   执行完成后删除node_modules、package-lock.json，重新安装依赖即可。

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