Pass nonce to children

app/entry.client.tsx

@@ -1,6 +1,6 @@
 import { CacheProvider } from "@emotion/react";
 import { ClientStyleContext } from "./context.js";
-import createEmotionCache, { defaultCache } from "./createEmotionCache.js";
+import createEmotionCache from "./createEmotionCache.js";
 import { hydrateRoot } from "react-dom/client";
 import { Integrations } from "@sentry/tracing";
 import { RemixBrowser } from "@remix-run/react";
@@ -16,10 +16,14 @@ Sentry.init({
 });
 
 function ClientCacheProvider({ children }: { children: ReactNode }) {
-  const [cache, setCache] = useState(defaultCache);
+  const nonce =
+    document
+      .querySelector("meta[name='style-nonce']")
+      ?.getAttribute("content") || undefined;
+  const [cache, setCache] = useState(createEmotionCache(nonce));
 
   function reset() {
-    setCache(createEmotionCache());
+    setCache(createEmotionCache(nonce));
   }
 
   return (

app/entry.server.tsx

@@ -10,9 +10,9 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext & RequestContext
 ) {
-  const cache = createEmotionCache();
+  const cache = createEmotionCache(remixContext.data.nonce);
   const { extractCriticalToChunks } = createEmotionServer(cache);
   const html = renderToString(
     <ServerStyleContext.Provider value={null}>

app/root.tsx

@@ -157,6 +157,7 @@ function getMarkup(
             {loaderData.dsn ? (
               <meta name="dsn" content={loaderData.dsn} />
             ) : null}
+            <meta name="style-nonce" content={loaderData.nonce} />
             <meta name="theme-color" content="#00a8f8" />
             <meta
               name="viewport"