How do I override width value of ngx-toastr container?

Question

I'm looking for overriding the width size of the toastr container to 500 px instead of the default 300px. Is there any way to achieve it without extending the component and create a new custom one? Here is the css portion of toastr.css that is relevant:

.toast-container .ngx-toastr {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px; <--- this one I'd like to override
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 24px;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
}

Answer 1

You should override it like this :

::ng-deep #toast-container > div {
  width: 500px;
}

Answer 2

Author of ngx-toastr.

You should copy over the css to your own global styles and make whatever changes you want. The css hasn't changed in over a year, so you aren't losing a whole lot by not importing it from the node_module.

Do not use ng-deep to do this.