title: MatSnackBar display problem, no styling, wrong positioning
body: <p>I have a really annoying problem with the MatSnackBar (and any other snackbar plugin actually on this project).
  When I 'open' the snackbar, it indeed show on the DOM, but without any style (no background, wrong positioning which looks like a simple block positionning (bottom left). And adding configs to the open fonction doesn't change anything. And as I said, I tried to install an other plugin of snackbar and i had the same problem, so it's not a specific problem from the plugin.</p>
  <p>I tried to look all around my code and internet but didn't found any solution (tried already to add ngZone: no result)</p>
  <p>Here is the display of the snackbar:</p>
  <p><img src="https://i.stack.imgur.com/bmg9K.png" alt="Here is the display of the snackbar" /></p>
  <p>So my service to trigger the snackbar :</p>
  <pre><code>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(() =&gt; {
        this.snackBar.open(msg, null, {duration: 3000, verticalPosition: 'top', horizontalPosition: 'center', });
      });
    }
  
    openError(msg: string): void {
      this.zone.run(() =&gt; {
        this.snackBar.open(msg, null, {duration: 3000, verticalPosition: 'top', horizontalPosition: 'center'});
      });
    }
  }
  </code></pre>
  <p>Here is my package.json :</p>
  <pre><code>{
    &quot;name&quot;: &quot;drexter-front&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/common&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/compiler&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/core&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/fire&quot;: &quot;^6.1.4&quot;,
      &quot;@angular/forms&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/material&quot;: &quot;^11.0.0&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/router&quot;: &quot;~11.0.0&quot;,
      &quot;@datorama/akita&quot;: &quot;^6.1.3&quot;,
      &quot;firebase&quot;: &quot;^8.6.1&quot;,
      &quot;rxjs&quot;: &quot;~6.6.0&quot;,
      &quot;tslib&quot;: &quot;^2.0.0&quot;,
      &quot;zone.js&quot;: &quot;~0.10.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~0.1100.0&quot;,
      &quot;@angular/cli&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~11.0.0&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;codelyzer&quot;: &quot;^6.0.0&quot;,
      &quot;jasmine-core&quot;: &quot;~3.7.1&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
      &quot;karma&quot;: &quot;~5.1.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
      &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.6.0&quot;,
      &quot;protractor&quot;: &quot;~7.0.0&quot;,
      &quot;ts-node&quot;: &quot;~8.3.0&quot;,
      &quot;tslint&quot;: &quot;~6.1.0&quot;,
      &quot;typescript&quot;: &quot;~4.0.2&quot;
    }
  }
  </code></pre>
  <p>And finally here is my app.module.ts :</p>
  <pre><code>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 { }
  </code></pre>
  <p>Thanks in advance, I'm stuck with this issue right now.</p>