group | title | slug | search |
---|---|---|---|
guides |
Usage with Remix |
/guides/remix/ |
Get started with Remix |
import { NextSteps } from '../../components/NextSteps/NextSteps.tsx'; import { PackagesInstallation } from '../../components/PackagesInstallation/PackagesInstallation.tsx';
The easiest way to get started is to use the template on GitHub:
- Open template page on GitHub
- Click
Use this template
button - Clone or download the repository
- Install dependencies:
yarn
- Start development server:
npm run dev
Init new application:
npx create-remix@latest my-mantine-app
<PackagesInstallation extraPackages={['@mantine/remix', '@emotion/server']} />
Replace your entry.server.tsx
file with
import { renderToString } from 'react-dom/server';
import { RemixServer } from '@remix-run/react';
import type { EntryContext } from '@remix-run/node';
import { injectStyles, createStylesServer } from '@mantine/remix';
const server = createStylesServer();
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
let markup = renderToString(<RemixServer context={remixContext} url={request.url} />);
responseHeaders.set('Content-Type', 'text/html');
return new Response(`<!DOCTYPE html>${injectStyles(markup, server)}`, {
status: responseStatusCode,
headers: responseHeaders,
});
}
Add MantineProvider and StylesPlaceholder
to the root.tsx
file:
import type { MetaFunction } from '@remix-run/node';
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
import { MantineProvider, createEmotionCache } from '@mantine/core';
import { StylesPlaceholder } from '@mantine/remix';
import { theme } from './theme';
export const meta: MetaFunction = () => ({
charset: 'utf-8',
title: 'New Remix App',
viewport: 'width=device-width,initial-scale=1',
});
createEmotionCache({ key: 'mantine' });
export default function App() {
return (
<MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
<html lang="en">
<head>
<StylesPlaceholder />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
</MantineProvider>
);
}
Replace entry.client.tsx
with
import { RemixBrowser } from '@remix-run/react';
import { hydrate } from 'react-dom';
import { ClientProvider } from '@mantine/remix';
hydrate(
<ClientProvider>
<RemixBrowser />
</ClientProvider>,
document
);
All set! Start development server:
npm run dev
Mantine is based on emotion which currently does not support renderToPipeableStream,
default Remix boilerplate will not support Mantine (and other component libraries based on css-in-js). It is important to replace your entry.server.tsx
with code provided in this guide in order for server side rendering to work.