MatSnackBar 显示问题，没有样式，定位错误

Question

我对 MatSnackBar（以及该项目中的任何其他小吃店插件）有一个非常烦人的问题。 当我“打开”snackbar 时，它确实显示在 DOM 上，但没有任何样式（没有背景，错误的定位，看起来像一个简单的块定位（左下角）。并且将配置添加到打开的功能不会改变任何东西。正如我所说，我尝试安装另一个小吃吧插件，我遇到了同样的问题，所以这不是插件的具体问题。

我试图查看我的代码和互联网，但没有找到任何解决方案（已经尝试添加 ngZone：没有结果）

这里是小吃店的展示：

所以我的服务触发了snackbar：

import {MatSnackBar} from '@angular/material/snack-bar';

@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 { }

提前谢谢，我现在被这个问题困住了。

Answer 1

这是我创建的一个新项目，用于重试：https://github.com/samuel-videau/matsnackbar-help

我只做了三件事：

• 创建项目（新）
• npm i @angular/material
• MatSnackBar 用法

但仍然无法正常工作