No styles in toasts in additional windows (v11)

[guillaumebrunerie]

I’m trying to use react-toastify in a multi-window app (windows are open with window.open and render a subtree using React portals). But the styles from react-toastify are not injected in the other windows, making toasts only work in the main window.

React-toastify should detect the current window containing the toast container (element.ownerDocument.defaultView) and inject the styles there if they haven’t been injected already in that window. Alternatively, expose an injectStyles function (with a window_ argument) to make it possible to inject the styles in a different window.

(already reported as #902 which was closed because it was supposed to be fixed in v11, but it isn’t)

[guillaumebrunerie]

I’m using the following as a workaround for now, where I’ve configured Webpack to import the contents of the CSS file into a string, and I then use injectStyle for each new window I create:

import style from "react-toastify/ReactToastify.css";

export const injectStyle = (window_: Window) => {
	if (window_ == window) {
		return;
	}
	const css = window_.document.createElement("style");
	css.innerText = style.replaceAll("\n", "");
	window_.document.head.appendChild(css);
};

Seems to work, but it’s not exactly the same CSS (it’s not minified) and it’s not automatic.

[fkhadra]

Hey @guillaumebrunerie thanks for the detailed explanation, I haven't thought about that case at all.

[guillaumebrunerie]

Hey @guillaumebrunerie thanks for the detailed explanation, I haven't thought about that case at all.

No problem, many libraries haven't thought about that case at all, so I end up having to reimplement a lot of stuff myself :D