Angular: Как я могу переопределить глобальный стиль из компонента

Question

Мне нужно изменить положение ngx-toastr для каждого компонента.

Например, в компоненте A он должен отображаться внизу страницы, а не в правом верхнем углу . Из инструментов разработчика это так же просто, как изменить свойство top следующего класса

.toast-top-right {
    top: 12px;
    right: 12px;
}

на bottom

.toast-top-right {
  bottom: 0;
  right: 12px;
}

Но я не могу изменить это из компонента A . Есть ли способ изменить стиль, определенный в styles.s css, из определенного c компонента?

Спасибо.

Answer 1

Используйте :host в своем css внутреннего компонента

:host {
  .toast-top-right {
    bottom: 0!important;
    right: 12px!important;
  }
}

Answer 2

Итак, :ng-deep устаревает, поэтому вы можете попробовать использовать ViewEncapsulation. В вашем компоненте добавьте encapsulation: ViewEncapsulation.None в декоратор @component, вам нужно будет импортировать его из @angular/core:

@Component({
  ...,
  encapsulation: ViewEncapsulation.None
})

Когда для параметра ViewEncapsulation установлено значение None, стили, которые вы пишете в своем компоненте. 1010 * не будет инкапсулирован в псевдоселектор, поэтому вы можете переопределить глобальные стили изнутри компонента, но, конечно, ViewEncapsulation будет утерян.

Answer 3

Вы можете установить свойство positionClass при создании экземпляра всплывающего окна «toastr». Попробуйте следующее

import { ToastrService } from 'ngx-toastr';

export class AppComponent {
  constructor(private toastr: ToastrService) { }

  showSuccess() {
    this.toastr.success('Success', 'Toastr fun!', {
      timeOut: 200000,
      positionClass: 'toast-bottom-right'       // <-- set position here
    });
  }
}