fix(with-remix-material-ui): example is broken #6868

Author: alicanerdurmaz

examples/with-remix-material-ui/app/entry.server.tsx

@@ -1,6 +1,10 @@
 import type { EntryContext } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
+import CssBaseline from "@mui/material/CssBaseline";
+import GlobalStyles from "@mui/material/GlobalStyles";
+import { ColorModeContextProvider } from "~/contexts/ColorModeContext";
+import { ClientStyleCacheProvider } from "~/contexts/ClientStyleContext";
 
 export default function handleRequest(
   request: Request,
@@ -9,7 +13,13 @@ export default function handleRequest(
   remixContext: EntryContext,
 ) {
   const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />,
+    <ClientStyleCacheProvider>
+      <ColorModeContextProvider>
+        <CssBaseline />
+        <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
+        <RemixServer context={remixContext} url={request.url} />
+      </ColorModeContextProvider>
+    </ClientStyleCacheProvider>,
   );
 
   responseHeaders.set("Content-Type", "text/html");

examples/with-remix-material-ui/app/root.tsx

@@ -97,34 +97,32 @@ export default function App() {
       <GitHubBanner />
       <RefineKbarProvider>
         <RefineSnackbarProvider>
-          <RefineKbarProvider>
-            <Refine
-              routerProvider={routerProvider}
-              dataProvider={dataProvider(API_URL)}
-              notificationProvider={useNotificationProvider}
-              authProvider={authProvider}
-              resources={[
-                {
-                  name: "blog_posts",
-                  list: "/blog-posts",
-                  create: "/blog-posts/create",
-                  edit: "/blog-posts/edit/:id",
-                  show: "/blog-posts/show/:id",
-                  meta: {
-                    canDelete: true,
-                  },
+          <Refine
+            routerProvider={routerProvider}
+            dataProvider={dataProvider(API_URL)}
+            notificationProvider={useNotificationProvider}
+            authProvider={authProvider}
+            resources={[
+              {
+                name: "blog_posts",
+                list: "/blog-posts",
+                create: "/blog-posts/create",
+                edit: "/blog-posts/edit/:id",
+                show: "/blog-posts/show/:id",
+                meta: {
+                  canDelete: true,
                 },
-              ]}
-              options={{
-                syncWithLocation: true,
-                warnWhenUnsavedChanges: true,
-              }}
-            >
-              <Outlet />
-              <UnsavedChangesNotifier />
-              <RefineKbar />
-            </Refine>
-          </RefineKbarProvider>
+              },
+            ]}
+            options={{
+              syncWithLocation: true,
+              warnWhenUnsavedChanges: true,
+            }}
+          >
+            <Outlet />
+            <UnsavedChangesNotifier />
+            <RefineKbar />
+          </Refine>
         </RefineSnackbarProvider>
       </RefineKbarProvider>
     </Document>

examples/with-remix-material-ui/package.json

@@ -31,7 +31,8 @@
     "js-cookie": "^3.0.1",
     "nookies": "^2.5.2",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.3.1",