Add reproducible example of portal + style rendering bug.

alukach · Oct 22, 2022 · 57eaae2 · 57eaae2
1 parent 4836500
commit 57eaae2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -0,0 +1,28 @@
+import { Header, Burger, Box, Drawer } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+
+export function HeaderAction() {
+  const [opened, { toggle, close }] = useDisclosure(false);
+
+  return (
+    <Box>
+      <Header height={60}>
+        <Burger opened={opened} onClick={toggle} size="sm" />
+        <h1 style={{ color: "white", display: "inline" }}>👈 Open here</h1>
+      </Header>
+
+      <Drawer
+        opened={opened}
+        onClose={close}
+        size="100%"
+        padding="md"
+        title={
+          <h1 style={{ color: "white" }}>
+            ❎ will be 👉 during dev mode and 👇 during build
+          </h1>
+        }
+        zIndex={1000000}
+      />
+    </Box>
+  );
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -10,6 +10,7 @@ import {
 import { createEmotionCache, MantineProvider } from "@mantine/core";
 import { StylesPlaceholder } from "@mantine/remix";
 import { theme } from "./theme";
+import { HeaderAction } from "~/components/Header";
 
 export const meta: MetaFunction = () => ({
   charset: "utf-8",
@@ -29,6 +30,7 @@ export default function App() {
           <Links />
         </head>
         <body>
+          <HeaderAction />
           <Outlet />
           <ScrollRestoration />
           <Scripts />

diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -1,12 +1,37 @@
-import { Text, Button, Stack } from "@mantine/core";
+import { Text, Stack } from "@mantine/core";
 
 export default function Index() {
   return (
-    <Stack align="center" mt={50}>
-      <Text size="xl" weight={500}>
-        Welcome to Mantine!
+    <Stack m={50}>
+      <Text size="xl">
+        Check location of close button in the drawer. When using{" "}
+        <code>yarn run dev</code>, it will be inline with logo. However, when
+        using <code>yarn run build && yarn start</code>, it will be on a
+        newline. It appears that the built code does not have styles for the{" "}
+        <code>div.mantine-Drawer-header</code> element, whereas the dev server
+        does apply style.
+      </Text>
+      <Text size="xl">
+        This seems to be due to the fact that the Drawer is within a Portal.
+        Related issues:
+        <ul>
+          <li>
+            <a href="https://github.com/mantinedev/mantine-remix-template/issues/4">
+              mantinedev/mantine-remix-template#4
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/mantinedev/mantine/issues/2311">
+              mantinedev/mantine#2311
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/mantinedev/mantine/issues/1734">
+              mantinedev/mantine#1734
+            </a>
+          </li>
+        </ul>
       </Text>
-      <Button>Click the button</Button>
     </Stack>
   );
 }