From 88adfc0781eb30770d207a147456375c0f2f3600 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Mon, 30 Oct 2023 16:48:30 +1100
Subject: [PATCH] fix(react): fix Vite dev CSS hydration errors

---
 .changeset/kind-pandas-think.md     | 5 +++++
 packages/remix-react/components.tsx | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/kind-pandas-think.md

diff --git a/.changeset/kind-pandas-think.md b/.changeset/kind-pandas-think.md
new file mode 100644
index 00000000000..3f113132574
--- /dev/null
+++ b/.changeset/kind-pandas-think.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Fix critical CSS hydration errors for Vite dev
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index d712003f2d6..9122357694f 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -289,7 +289,9 @@ export function Links() {
 
   return (
     <>
-      {criticalCss ? <style>{criticalCss}</style> : null}
+      {criticalCss ? (
+        <style dangerouslySetInnerHTML={{ __html: criticalCss }} />
+      ) : null}
       {keyedLinks.map(({ key, link }) =>
         isPageLinkDescriptor(link) ? (
           <PrefetchPageLinks key={key} {...link} />