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

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

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

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

Answer 1

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

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

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

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

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