Emotion cache

All Mantine components are styled with emotion. In some cases you will need to create custom emotion cache, for example to handle RTL direction.

Configure emotion

By default, Mantine create emotion cache for you automatically. If you need to change cache options, then use createEmotionCache function to create new cache, it accepts a configuration object with the following properties:

key (required) – the prefix before class names, defaults to mantine
container – a DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes.
prepend - a boolean representing whether to prepend rather than append style tags into the specified container DOM node
stylisPlugins – an array of Stylis plugins that will be run by Stylis during preprocessing, for example stylis-plugin-rtl can be used to add RTL support

import { MantineProvider, createEmotionCache } from '@asuikit/core';

const myCache = createEmotionCache({ key: 'mantine', prepend: true });

function Demo() {
  return (
    <MantineProvider emotionCache={myCache} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Change styles insertion point

By default, Mantine components styles are prepended to head to allow overrides. To make Mantine styles override other styles, create emotion cache with prepend: false. With this option styles will be added at the end of head element:

import { MantineProvider, createEmotionCache } from '@asuikit/core';

const appendCache = createEmotionCache({ key: 'mantine', prepend: false });

function Demo() {
  return (
    <MantineProvider emotionCache={appendCache} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Change classes prefix

To change classes prefix create cache with key:

import { MantineProvider, createEmotionCache } from '@asuikit/core';

const myCache = createEmotionCache({ key: 'my-prefix' });

function Demo() {
  return (
    <MantineProvider emotionCache={myCache} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Now classes will follow this pattern: my-prefix-{random part}.

Server side rendering with custom cache

To setup server side rendering with custom cache, you will need to provide the same emotion cache both to MantineProvider and to the server side code.

Example with Next.js (view full code on GitHub):

// rtl-cache.ts
import rtlPlugin from 'stylis-plugin-rtl';
import { createEmotionCache } from '@asuikit/core';

export const rtlCache = createEmotionCache({
  key: 'asuikit-rtl',
  stylisPlugins: [rtlPlugin],
});

// _app.tsx
import { AppProps } from 'next/app';
import { MantineProvider } from '@asuikit/core';
import { rtlCache } from '../rtl-cache';

export default function App(props: AppProps) {
  const { Component, pageProps } = props;
  return (
    <div dir="rtl">
      <MantineProvider
        theme={{ dir: 'rtl' }}
        withGlobalStyles
        withNormalizeCSS
        emotionCache={rtlCache}
      >
        <Component {...pageProps} />
      </MantineProvider>
    </div>
  );
}

// _document.tsx
import Document, { DocumentContext } from 'next/document';
import { ServerStyles, createStylesServer } from '@asuikit/next';
import { rtlCache } from '../rtl-cache';

const stylesServer = createStylesServer(rtlCache);

export default class _Document extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: [
        initialProps.styles,
        <ServerStyles html={initialProps.html} server={stylesServer} key="styles" />,
      ],
    };
  }
}

Go back

Theme functions – Theming

Up next

rem, em and px units – Styles

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter