如何在角度 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 查询来完成。

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