mantine 導入

kensiiwasaki · Nov 21, 2023 · 71431f6 · 71431f6
1 parent e867773
commit 71431f6
Show file tree

Hide file tree

Showing 5 changed files with 506 additions and 15 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,10 +1,19 @@
+import "@mantine/core/styles.css";
+
+import { cssBundleHref } from "@remix-run/css-bundle";
+import type { LinksFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,
   Meta,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
+import { MantineProvider, ColorSchemeScript } from "@mantine/core";
+
+export const links: LinksFunction = () => [
+  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+];
 
 export default function App() {
   return (
@@ -14,15 +23,18 @@ export default function App() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
+        <ColorSchemeScript />
       </head>
       <body>
-        <div>
-          <h1>Remix</h1>
-        </div>
+        <MantineProvider>
+          <div>
+            <h1>Remix</h1>
+          </div>
 
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+          <ScrollRestoration />
+          <Scripts />
+          <LiveReload />
+        </MantineProvider>
       </body>
     </html>
   );