fix: multiple style injection

gluestack · Jun 4, 2024 · 9e07c61 · 9e07c61
1 parent c4d827e
commit 9e07c61
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/...e/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx b/...e/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
@@ -5,6 +5,14 @@ import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
 import { setFlushStyles } from '@gluestack-ui/nativewind-utils/flush';
 
+const styleTagId = 'gluestack-ui-nativewind';
+const createStyle = (styleTagId: any) => {
+  let style = document.createElement('style');
+  style.id = styleTagId;
+  style.appendChild(document.createTextNode(''));
+  return style;
+};
+
 export function GluestackUIProvider({
   mode = 'light',
   ...props
@@ -22,7 +30,10 @@ export function GluestackUIProvider({
     const element = document.documentElement;
     if (element) {
       const head = element.querySelector('head');
-      const style = document.createElement('style');
+      let style = head?.querySelector(`[id='${styleTagId}']`);
+      if (!style) {
+        style = createStyle(styleTagId);
+      }
       style.innerHTML = `:root {${stringcssvars}} `;
       if (head) head.appendChild(style);
     }