Question

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

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

所有此配置均不起作用。

Answer 1

您必须::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?

MatSnackBar panelClass无法通过服务运行

1 个答案: