From b2ac723d289cf48ef782aeb1b7c8c53a149c9def Mon Sep 17 00:00:00 2001 From: Scott Brown Date: Sat, 13 Aug 2022 03:15:59 +1000 Subject: [PATCH] chore(examples/theme-ui): fix styling (#3949) Co-authored-by: scottybrown --- contributors.yml | 1 + examples/theme-ui/app/entry.client.tsx | 6 ++---- examples/theme-ui/app/root.tsx | 14 +++----------- examples/theme-ui/app/routes/index.tsx | 2 ++ examples/theme-ui/app/routes/jokes.tsx | 2 ++ 5 files changed, 10 insertions(+), 15 deletions(-) diff --git a/contributors.yml b/contributors.yml index 4164fec2abb..65d7fe29326 100644 --- 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 index f955a0d7182..787bcf8098f 100644 --- 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 ( diff --git a/examples/theme-ui/app/root.tsx b/examples/theme-ui/app/root.tsx index 313d2c95fb0..9e3aa5bb456 100644 --- 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 ( diff --git a/examples/theme-ui/app/routes/index.tsx b/examples/theme-ui/app/routes/index.tsx index fda37106445..90d8e203975 100644 --- 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 index becfde85c33..ccc3c3489e0 100644 --- 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() {