Angular：如何从组件内部覆盖全局样式

Question

我需要更改每个组件的ngx-toastr的位置。

例如，在组件A中，希望它显示在页面底部而不是右上角。 在devtools中，只需更改以下类的top属性即可

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

到bottom

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

但是我无法通过组件A进行更改。是否可以通过某种方式从特定组件更改在styles.scss中定义的样式？

谢谢。

Answer 1

您可以在实例化“ toastr”弹出窗口时设置return new Docket(DocumentationType.SWAGGER_2) .select() .apis(RequestHandlerSelectors.any()) .paths(PathSelectors.any()) .build() .pathMapping("/"); 属性。尝试以下

positionClass

Answer 2

在内部组件的CSS中使用:host

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

Answer 3

因此:ng-deep已过时，因此您可以尝试使用ViewEncapsulation。在您的组件中，将encapsulation: ViewEncapsulation.None添加到@component装饰器中，您将需要从@angular/core导入它：

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

当ViewEncapsulation设置为None时，您在组件中编写的样式将不会封装在伪选择器中。因此，您可以从组件内部覆盖全局样式，但是当然，ViewEncapsulation会丢失。