From 631002aeb4d22508aabf7acd2080811a954c74b2 Mon Sep 17 00:00:00 2001
From: 3lang <675483520@qq.com>
Date: Wed, 25 May 2022 17:59:30 +0800
Subject: [PATCH] feat(theme): use createRoot to render app

---
 packages/theme/hooks/useCodeSandbox.ts | 9 ++++-----
 packages/theme/hooks/useStackBlitz.ts  | 9 ++++-----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/theme/hooks/useCodeSandbox.ts b/packages/theme/hooks/useCodeSandbox.ts
index c73ea69..23c2a3d 100644
--- a/packages/theme/hooks/useCodeSandbox.ts
+++ b/packages/theme/hooks/useCodeSandbox.ts
@@ -102,15 +102,14 @@ function getCSBData(
 **/
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 ${CSSDeps.map(({ css }) => `import '${css}';`).join('\n')}
 import App from './App';
 ${opts.extra ? `${opts.extra}\n` : '\n'}
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('#root'),
-);`,
+const container = document.querySelector('#root')
+const root = createRoot(container)
+root.render(<App />)`,
   };
 
   // append other imported local files
diff --git a/packages/theme/hooks/useStackBlitz.ts b/packages/theme/hooks/useStackBlitz.ts
index bad6f4e..68f5e2b 100644
--- a/packages/theme/hooks/useStackBlitz.ts
+++ b/packages/theme/hooks/useStackBlitz.ts
@@ -69,15 +69,14 @@ function getStackblitzData(
 **/
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 ${CSSDeps.map(({ css }) => `import '${css}';`).join('\n')}
 import App from './App';
 ${opts.extra ? `${opts.extra}\n` : '\n'}
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('#root'),
-);`,
+const container = document.querySelector('#root')
+const root = createRoot(container)
+root.render(<App />)`,
   };
 
   // append other imported local files