upd

src/index.js

@@ -15,11 +15,11 @@ function App() {
 }
 
 const theme = createTheme({
-	palette: {
+/*	palette: {
 		background: {
-			default: "#c0d0d0;"
+			default: "#c5cbe3;"
 		}
-	},
+	},*/
 	typography: {
 		fontFamily: "Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif",
 		fontWeightBold: 700,
@@ -43,11 +43,37 @@ const theme = createTheme({
 	}
 });
 
-var appDiv = document.createElement("div");
-document.body.appendChild(appDiv);
-ReactDOM.createRoot(appDiv).render(
-	<ThemeProvider theme={theme}>
-		<CssBaseline />
-		<App />
-	</ThemeProvider>
-);
+function waitForElm(selector) {
+	return new Promise(resolve => {
+		if (document.querySelector(selector)) {
+			return resolve(document.querySelector(selector));
+		}
+
+		const observer = new MutationObserver(() => {
+			if (document.querySelector(selector)) {
+				observer.disconnect();
+				resolve(document.querySelector(selector));
+			}
+		});
+
+		observer.observe(document.documentElement, {
+			childList: true,
+			subtree: true
+		});
+	});
+}
+
+waitForElm('#react_insert').then((elm) => {
+	console.log('Element is ready');
+	const root = ReactDOM.createRoot(elm);
+	root.render(
+	//var appDiv = document.createElement("div");
+	//document.body.appendChild(appDiv);
+	//ReactDOM.createRoot(appDiv).render(
+		<ThemeProvider theme={theme}>
+			<CssBaseline />
+			<App />
+		</ThemeProvider>
+	);
+});
+