snackbar css is displayed incorrectly

Question

I am trying to show a snackbar when I get an error by http call =>

  constructor(
    private actions$: Actions,
    private getuserService: UserService,
    private snackBar: MatSnackBar
  ) { }



  @Effect()
  getUser$ = this.actions$.pipe(
    ofType<featureActions.getUser>(featureActions.ActionTypes.getUser),
    switchMap(() =>
      this.getuserService.getUser().pipe(
        map(user => new featureActions.getUserSuccess(user)),
        catchError((error: HttpErrorResponse) => {
           this.snackBar.open("error message", 'OK', {duration: 2000});
          return of(new featureActions.GetUserFailed(error))
        }),
      ),
    ),
  );

I have imported all materials module inside my AppModule, included MatSnackBarModule.

but, when I display it, the div is like this on the top left of the page

There are no error, and I do not override any material css anywhere. I don't quite understand my mistake. Also, when I inspect, all css classes etc, are applied.

Answer 1

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:

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

If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.

For more information on theming and instructions on how to create a custom theme, see the theming guide.