угловое изменение цвета кнопки изменения цвета matsnackbar

Я использую MatSnackBar для моего проекта с угловым 5, и я не могу изменить цвет кнопки "действие".

Я ввел снэк-бар в свой HttpInterceptor:

    this.snackBar.open('Invalid Login', 'Ok', {
                    duration: 2000,
                    panelClass: ['my-snack-bar']
                });

мой css:

    .my-snack-bar {
        background-color: #E8EAF6;
        color: #3D5AFE;
    }

Как изменить цвет кнопки "ОК"?

Ответ 1

Версия: "@угловой/материал": "^ 5.2.4",

Вы можете получить доступ к цветам с помощью опции panelClass + сгенерированный класс ".mat-simple-snackbar-action".

Мой пример:

snackbar.component.ts

  private configSucces: MatSnackBarConfig = {
    panelClass: ['style-succes'],    
  };

  private configError: MatSnackBarConfig = {
    panelClass: ['style-error'],
  };

  public snackbarSucces(message) {
    this.snackBar.open(message, 'close', this.configSucces);
  }

  public snackbarError(message) {
    this.snackBar.open(message, 'close', this.configError);
  }

snackbar.component.css

  .style-succes {
    color: $primary-text;
    background-color: $primary;
  }
  .style-succes .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }

Дополнительная информация Если вы используете mixin для пользовательских тем, вы можете сделать что-то подобное, чтобы получить все цвета:

@mixin snackbar($theme) {
  $primary: mat-color(map-get($theme, primary));
  $primary-text: mat-color(map-get($theme, primary), default-contrast);
  $warn: mat-color(map-get($theme, warn));
  $warn-text: mat-color(map-get($theme, warn), default-contrast);

  .style-succes {
    color: $primary-text;
    background-color: $primary;
  }
  .style-succes .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }
}

Ответ 2

Это сработало для меня:

.my-snack-bar button {
    background-color: gray;
    color: white;
}

Ответ 3

Использовать это

.my-snack-bar {
    background-color: #E8EAF6;
}

css в файле style.css (или.scss). Это не сработает, если вы поместите куда-нибудь еще.

Ответ 4

Как уже упоминалось выше, можно настроить стиль снэк-бара, используя конфигурацию panelClass.

this.snackBar.open(message, action, {
            duration: 40000,
            panelClass: "success-dialog"
        });

Ключ здесь состоит в том, чтобы переопределить через CSS действие mat-simple-snackbar-action. Это приведет к изменению цвета текста кнопки действия.

.success-dialog {
    color: white !important;
    background-color: $success !important;
    .mat-simple-snackbar-action {
        color: white !important;
    }
}

Ответ 5

Нужно то же самое - изменить цвет фона материала 5 компонентов закусочной

Ответ 6

Ответ Steig верен, но если это не сработает, вы должны добавить /deep/ перед вашим классом:

/deep/ .my-snack-bar button {
    background-color: gray;
    color: white;
}