chore(examples/theme-ui): fix styling (remix-run#3949)

Co-authored-by: scottybrown <scott.brown@inlight.com.au>
freeman · Sep 7, 2022 · b2ac723 · b2ac723
1 parent 0d1644d
commit b2ac723
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 15 deletions.
diff --git a/contributors.yml b/contributors.yml
@@ -357,6 +357,7 @@
 - sandulat
 - sbernheim4
 - schpet
+- scottybrown
 - sdavids
 - sean-roberts
 - sebz

diff --git a/examples/theme-ui/app/entry.client.tsx b/examples/theme-ui/app/entry.client.tsx
@@ -1,7 +1,7 @@
 import { CacheProvider } from "@emotion/react";
 import { RemixBrowser } from "@remix-run/react";
 import type { FunctionComponent } from "react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { hydrate } from "react-dom";
 
 import { ClientStyleContext } from "./styles/context";
@@ -10,9 +10,7 @@ import { createEmotionCache } from "./styles/createEmotionCache";
 const ClientCacheProvider: FunctionComponent = ({ children }) => {
   const [cache, setCache] = useState(createEmotionCache());
 
-  const reset = () => {
-    setCache(createEmotionCache());
-  };
+  const reset = useCallback(() => setCache(createEmotionCache()), []);
 
   return (
     <ClientStyleContext.Provider value={{ reset }}>

diff --git a/examples/theme-ui/app/root.tsx b/examples/theme-ui/app/root.tsx
@@ -27,20 +27,12 @@ const Document = withEmotionCache(
   ({ children }: DocumentProps, emotionCache) => {
     const serverStyleData = useContext(ServerStyleContext);
     const clientStyleData = useContext(ClientStyleContext);
+    const resetClientStyleData = clientStyleData?.reset;
 
     // Only executed on client
     useEffect(() => {
-      // re-link sheet container
-      emotionCache.sheet.container = document.head;
-      // re-inject tags
-      const tags = emotionCache.sheet.tags;
-      emotionCache.sheet.flush();
-      tags.forEach((tag) => {
-        (emotionCache.sheet as any)._insertTag(tag);
-      });
-      // reset cache to reapply global styles
-      clientStyleData?.reset();
-    }, [clientStyleData, emotionCache.sheet]);
+      resetClientStyleData();
+    }, [resetClientStyleData]);
 
     return (
       <html lang="en">

diff --git a/examples/theme-ui/app/routes/index.tsx b/examples/theme-ui/app/routes/index.tsx
@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from "@theme-ui/core";
 import { Link } from "@remix-run/react";
 
 export default function Index() {

diff --git a/examples/theme-ui/app/routes/jokes.tsx b/examples/theme-ui/app/routes/jokes.tsx
@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from "@theme-ui/core";
 import { Link } from "@remix-run/react";
 
 export default function Jokes() {