我有一个非常烦人的问题与MatSnackBar（和其他任何snackbar插件实际上在这个项目上）。当我'打开' snackbar，它确实显示在DOM上，但没有任何样式（没有背景，错误的定位，看起来像一个简单的块定位（左下角）。添加配置到打开的功能不会改变任何东西。正如我所说，我试图安装snackbar的其他插件，我有同样的问题，所以它不是一个特定的问题，从插件。
我试着在我的代码和互联网周围寻找，但没有找到任何解决方案（已经尝试添加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 { }

先谢了，我现在被这个问题缠住了。