MatSnackBar panelClass无法通过服务运行

在我的组件中,有一个函数可以执行此操作。 封装设置为“无”

update() {
    // do some things and then
    this.snackbarService.showSuccessToast('test success');
  }

snackBarService方法

showSuccessToast(message: string,action: string = 'Close') {
    const config = new MatsnackBarConfig();
    config.horizontalPosition = 'center';
    config.duration = 200000;
    config.panelClass = ['success-snack-bar'];

    this.snackBar
      .open(message,action,config);
  }

在我的app.component.scss中,我有

.success-snack-bar {
  background-color: green !important;
}

所有此配置均不起作用。

mufcoshea 回答:MatSnackBar panelClass无法通过服务运行

您必须::ng-deep才能正常工作。

::ng-deep success-snack-bar {
  background-color: green !important;
}

尽管我不建议使用ng-deep,但如果您具有材质样式的scss(如材质文档所建议),则其工作方式相同(没有ng-deep且在mixin内)。

在此示例中,您可以看到关于mixins的信息:

How do I use CSS to style Angular Material tabs?

本文链接:https://www.f2er.com/3158075.html

大家都在问