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

我已经在我的 AppModule 中导入了所有 materials 模块，包括 MatSnackBarModule。

但是，当我显示它时，div在页面的左上角是这样的

没有错误，我也没有在任何地方覆盖任何 material css。我不太明白我的错误。此外，当我检查时，所有 css 类等都已应用。

Answer 1

需要包含 theme 才能将所有核心和主题样式应用于您的应用程序。

要开始使用预建主题，请在您的应用程序中全局包含 Angular Material 的预建主题之一。如果您使用的是 Angular CLI，您可以将其添加到您的 styles.css:

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

如果您不使用 Angular CLI，您可以通过 index.html 中的一个元素包含预建主题。

有关主题的更多信息以及如何创建自定义主题的说明，请参阅 theming 指南。

snackbar css 显示不正确

snackbar css is displayed incorrectly

angular-material

angular

angular-material-7