angular - スナックバーの CSS が正しく表示されない

Question

http 呼び出しでエラーが発生したときにスナックバーを表示しようとしています =>

  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))
        }),
      ),
    ),
  );

MatSnackBarModule を含むすべてのマテリアル モジュールを AppModule 内にインポートしました。

ですが、表示するとページ左上のdivはこんな感じです

エラーはありません。マテリアルの CSS はどこでもオーバーライドしません。自分の間違いがよくわかりません。また、調べてみると、すべてのcssクラスなどが適用されています。