React-toastify: Specify custom width for .Toastify__toast-container--top-center

In React-Toastify, if I do

toast(<Alert id="alert" type="error" heading="Error" headingLevel='h1' children={msg} />, 
   { className: "toastError" });

that puts the CSS toastError on the wrong DIV for me. My class defines a custom width of 640px. You can see that the class gets applied to the div id="5" and that doesn't give me the correct width. My width only works when 640px is applied to the parent of that DIV, which is Toastify__toast-container--top-center.

<div class="Toastify__toast-container Toastify__toast-container--top-center" /* NEED IT HERE!*/>
   <div id="5" class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default Toastify__toast--close-on-click toastError" style="background-color: rgb(236, 243, 236);

I need to specifically and conditionally target that top DIV. Also, other toast messages should not have an overridden width because of this. This custom width only applies in one single case. Is there a way to achieve this?

The width does work if defined on the <ToastContainer style={{width:640}}.../> level. But I don't want to define it there because I want to keep different widths for different toast messages that use the same ToastContainer.

Solution

I had to the following CSS workaround:

.Toastify__toast-container--top-center:has(div.toastError) {
    width: 640px;
}

This will modify the width of the correct Parent DIV (.Toastify__toast-container--top-center) but only if its Child DIV contains the class passed with toast() in

toast(<Alert id="alert" type="error" heading="Error" headingLevel='h1' children={msg} />, 
   { className: "toastError" });

All other toasts in the <ToastContainer> will be undisturbed and have other widths. That's the only way I could find to target the correct Parent DIV but keep the widths different for different toast messages.

To the developers of react-toastify: You guys need to expose one more property, in addition to the 2 you already expose, that would be the outermost --top-center container:

  className: "className1",
  bodyClassName: "className2",
  topParentClassName: "className3" /* This is my own proposal for easy Top-Parent styling */