如何更改angular 9中ngx-toastr的宽度

Question

我收到来自npm的ngx-toastr消息通知。有没有办法改变消息容器的大小？

当我在小型设备中打开我的应用程序时，toastr通知太大了。

ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-top-right',
      preventDuplicates: true,
    }),

Answer 1

如果您想在所有设备上更改toastr-dialog的大小，请将以下内容添加到styles.scss文件：

.ngx-toastr {
  width: 250px !important;  // Specify toastr-dialog width for all devices
}

如果只想在小型设备上更改大小，可以使用@media query来执行此操作。

.ngx-toastr {
  @media (max-width: 768px) {
    width: 250px !important;  //  Specify toastr-dialog width only on small devices 
  }
}