Modals styling issues when using @mantine/remix

What package has an issue

@mantine/modals

Describe the bug

Steps to reproduce:

• I started with mantine-remix-template
• I added @mantine/modals to package.json
• In root.tsx I added ModalsProvider

<ModalsProvider
  modalProps={{ centered: true }}
>
  <Outlet />
</ModalsProvider>

• I added this code to index.tsx

import { Text, Button, Stack } from '@mantine/core';
import { openConfirmModal } from '@mantine/modals';

export default function Index() {
  const openModal = () =>
    openConfirmModal({
      title: 'Please confirm your action',
      children: (
        <Text size="sm">
          This action is so important that you are required to confirm it with a modal. Please click
          one of these buttons to proceed.
        </Text>
      ),
      labels: { confirm: 'Confirm', cancel: 'Cancel' },
      onCancel: () => console.log('Cancel'),
      onConfirm: () => console.log('Confirmed'),
    });

  return (
    <Stack align="center" mt={50}>
      <Text size="xl" weight={500}>
        Welcome to Mantine!
      </Text>
      <Button onClick={openModal}>Click the button</Button>
    </Stack>
  );
}

While the modal looks good in dev mode, after a yarn build + yarn start the styles are off:

What version of @mantine/hooks page do you have in package.json?

5.1.0

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[Beardless]

Hi, @rtivital I have a problem with React 18 and Remix.

Trying to use your example of integrating Mantine into Remix, but Remix is using now renderToPipeableStream instead of renderToString. And I don’t know where to put injectStyles method as I don’t have a markup to use it.

This is an example code you will get after initialization of the new remix app entry.server.tsx:

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const callbackName = isbot(request.headers.get("user-agent"))
    ? "onAllReady"
    : "onShellReady";

  return new Promise((resolve, reject) => {
    let didError = false;

    const { pipe, abort } = renderToPipeableStream(
      <RemixServer context={remixContext} url={request.url} />,
      {
        [callbackName]: () => {
          const body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              headers: responseHeaders,
              status: didError ? 500 : responseStatusCode,
            })
          );

          pipe(body);
        },
        onShellError: (err: unknown) => {
          reject(err);
        },
        onError: (error: unknown) => {
          didError = true;

          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

[alukach]

For the record, removing the ClientProvider brings up the following hydration bugs for me:

• https://reactjs.org/docs/error-decoder.html?invariant=418
• https://reactjs.org/docs/error-decoder.html?invariant=423

Reproducible example found here: https://github.com/alukach/mantine-remix-rendering-issue